12個值得收藏的 CSS 技巧！！-css教學-PHP中文網

這篇文章要跟大家分享12個值得收藏的 CSS 技巧，大家可以試著記住，在關鍵時可救命喲！希望對大家有幫助！

12個值得收藏的 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 h2{ 
    font-size:36px; 
    color:#000; 
    font-weight:800; 
} 
.m h2:hover{ 
    color:#f00; 
}

登入後複製

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

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 相关的重要属性：