值得收藏的CSS技巧有哪些

這篇文章主要講解了“值得收藏的CSS技巧有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“值得收藏的CSS技巧有哪些”吧！

1. 使用 Shape-outside 在浮動圖像周圍彎曲文本

它是一個允許設置形狀的 CSS 屬性。它還有助于定義文本流動的區域。css代碼：

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

2. 魔法組合

這個小組合實際上可以防止你在 HTML 中遇到的大多數布局錯誤的問題。我們確實不希望水平滑塊或絕對定位的項目做他們想做的事情，也不希望到處都是隨機的邊距和填充。所以這是你們的魔法組合。

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

有時“display:block”沒有用，但在大多數情況下，你會將 <a> 和 <span> 視為與其他塊一樣的塊。所以，在大多數情況下，它實際上會幫助你！

3. 拆分 HTML 和 CSS

這更像是一種“工作流程”類型的技巧。我建議你在開發時創建不同的 CSS 文件，最后才合并它們。例如，一個用于桌面，一個用于移動等。最后，你必須合并它們，因為這將有助于最大限度地減少您網站的 HTTP 請求數量。

同樣的原則也適用于 HTML。如果你不是在 Gatsby 等 SPA 環境中進行開發，那么 PHP 可用于包含 HTML 代碼片段。例如，你希望在單獨的文件中保留一個“/modules”文件夾，該文件夾將包含導航欄、頁腳等。因此，如果需要進行任何更改，你不必在每個頁面上都對其進行編輯。模塊化越多，結果就越好。

4. ::首字母

它將樣式應用于塊級元素的第一個字母。因此，我們可以從印刷或紙質雜志中引入我們熟悉的效果。如果沒有這個偽元素，我們將不得不創建許多跨度來實現這種效果。例如：

這是如何做到的？代碼如下：

p.intro:first-letter {
  font-size: 100px;
  display: block;
  float: left;
  line-height: .5;
  margin: 15px 15px 10px 0 ;
}

5. 四大核心屬性

CSS 動畫提供了一種相對簡單的方法來在大量屬性之間平滑過渡。良好的動畫界面依賴于流暢流暢的體驗。為了在我們的動畫時間線中保持良好的性能，我們必須將我們的動畫屬性限制為以下四個核心：

• 縮放 - transform:scale(2)

• 旋轉 - transform:rotate(180deg)

• 位置 – transform:translateX(50rem)

• 不透明度 - opacity: 0.5

邊框半徑、高度/寬度或邊距等動畫屬性會影響瀏覽器布局方法，而背景、顏色或框陰影的動畫會影響瀏覽器繪制方法。所有這些都會大大降低您的 FPS (FramesPerSecond)。您可以使用這些屬性來產生一些有趣的效果，但應謹慎使用它們以保持良好的性能。

6. 使用變量保持一致

保持一致性的一個好方法是使用 CSS 變量或預處理器變量來預定義動畫時間。

:root{ timing-base: 1000;}

在不定義單元的情況下設置基線動畫或過渡持續時間為我們提供了在 calc() 函數中調用此持續時間的靈活性。此持續時間可能與我們的基本 CSS 變量不同，但它始終是對該數字的簡單修改，并將始終保持一致的體驗。

7. 圓錐梯度

有沒有想過是否可以只使用 CSS 創建餅圖？好消息是，您實際上可以！這可以使用 conic-gradient 函數來完成。此函數創建一個由漸變組成的圖像，其中設置的顏色過渡圍繞中心點旋轉。您可以使用以下代碼行執行此操作：

.piechart {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

8. 更改文本選擇顏色

要更改文本選擇顏色，我們使用 ::selection。它是一個偽元素，在瀏覽器級別覆蓋以使用您選擇的顏色替換文本突出顯示顏色。使用光標選擇內容后即可看到效果。

::selection {
     background-color: #f3b70f;
 }

9. 懸停效果

懸停效果通常用于按鈕、文本鏈接、站點的塊部分、圖標等。如果您想在有人將鼠標懸停在其上時更改顏色，只需使用相同的 CSS，但要添加 :hover到它并更改樣式。這是您的方法；

.m h3{ 
    font-size:36px; 
    color:#000; 
    font-weight:800; 
} 
.m h3:hover{ 
    color:#f00; 
}

當有人將鼠標懸停在 h3 標簽上時，這會將您的 h3 標簽的顏色從黑色更改為紅色。它非常有用，因為如果您不想更改它，則不必再次聲明字體大小或粗細。它只會更改您指定的任何屬性。

10.投影

添加此屬性可為透明圖像帶來更好的陰影效果。您可以使用給定的代碼行執行此操作。

.img-wrapper img{
          width: 100% ;
          height: 100% ;
          object-fit: cover ;
          filter: drop-shadow(30px 10px 4px #757575);
 }

11. 使用放置項居中 Div

居中 div 元素是我們必須執行的最可怕的任務之一。但不要害怕我的朋友，你可以用幾行 CSS 將任何 div 居中。只是不要忘記設置display:grid; 對于父元素，然后使用如下所示的 place-items 屬性。

main{
     width: 100% ;
      height: 80vh ;
      display: grid ;
      place-items: center center;
}

12. 使用 Flexbox 居中 Div

我們已經使用地點項目將項目居中。但是現在我們解決了一個經典問題，使用 flexbox 將 div 居中。為此，讓我們看一下下面的示例：

<div class="center h-48">
  <div></div>
</div>

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}

首先，我們需要確保父容器持有圓，即 flex-container。在它里面，我們有一個簡單的 div 來制作我們的圓圈。我們需要使用以下與 flexbox 相關的重要屬性：

• display: flex; 這確保父容器具有 flexbox 布局。

• align-items: center; 這可確保 flex 子項與橫軸的中心對齊。

• justify-content: center; 這確保 flex 子項與主軸的中心對齊。

感謝各位的閱讀，以上就是“值得收藏的CSS技巧有哪些”的內容了，經過本文的學習后，相信大家對值得收藏的CSS技巧有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！