在web開發領域里，有許多布局和效果看起來好像很容易實現，但是動手一做，發現好像不是那么回事情，為了解決這些看起來容易做起來難的問題，我今天特意整理一些實用的CSS技巧。

現在，我們就開始今天的內容吧。

1.首字母下降

我們可以使用 :first-letter 來刪除文本的第一個字母。

p:first-letter {
 font-size: 200%;
 color: #8A2BE2;
}

:first-letter 選擇器用于指定元素首字母的樣式，它只適用于塊級元素。

在線演示地址：https://codepen.io/OMGZui/pen/oNEMVvN

2. 圖文環繞

Shape-outside 是一個允許設置形狀的 CSS 屬性，它還有助于定義文本流動的區域.

在線演示地址：https://codepen.io/OMGZui/pen/JjpBzGP

3. 使用 :where() 簡化代碼

將相同的樣式應用于多個元素時，CSS 可能如下所示：

.page div,
.paget .title,
.page #article {
 color: red;
}

這段代碼看起來可讀性不太友好，這時，:where() 偽類就派上用場了。

:where() 偽類函數接受一個選擇器列表作為其參數，并將選擇所有可以通過選擇器列表中的任何規則選擇的元素。

上面的代碼可以使用 :where() 寫成這樣：

.page :where(div, .title, #article) {
 color: red;
}

這樣，這段代碼是不是看起來干凈多了？

4.透明圖像的陰影

您是否曾經嘗試過向透明圖像添加框陰影，只是為了讓它看起來像您添加了邊框？

它的工作方式是 drop-shadow 屬性跟隨給定圖像的 alpha 通道。因此，陰影基于圖像內部的形狀，而不是顯示在圖像外部。

在線演示地址：https://codepen.io/OMGZui/pen/bGLjJNO

5.文字打字效果

借助 CSS 動畫功能，我們可以使網頁設計變得越來越有創意，還可以讓網頁栩栩如生。在此示例中，我們使用動畫和“@keyframes”屬性來實現打字機效果。

具體來說，對于這個演示，我們實現了 steps() 屬性來分割我們的文本動畫。

首先，我們必須指定 steps()，在這個例子中，我們希望設置動畫的文本的字符長度。

其次，我們使用“@keyframes”來聲明動畫何時開始。例如，如果您在“Typing effect for text”之后寫了另一個詞，除非您更改 CSS 代碼段中的 steps() 數量，否則動畫將不會運行。

也就是說，這種效果并不是特別新鮮。然而，大多數開發人員涌向 JavaScript 庫，盡管使用 CSS 可以實現相同的結果。

在線演示地址：https://codepen.io/OMGZui/pen/MWQBxqd

6.設置自定義光標

您不太可能需要強迫訪問者進入一個獨特的光標。至少，不是為了一般的用戶體驗目的。不過，關于 cursor 屬性需要注意的一件事是它允許您顯示圖像。這相當于以照片格式顯示工具提示。

一些用例包括能夠比較兩張不同的照片而無需在視口中渲染這些照片。例如。游標屬性可用于節省設計中的空間。由于您可以將自定義光標鎖定到特定的 div 元素，它不會干擾它之外的元素。

在線演示地址：https://codepen.io/OMGZui/pen/abqjMXd

7. 純 CSS實現列表清單

這是動態列表清單的演示效果例子。

它的工作方式是我們將復選框輸入類型與 :checked 偽類一起使用。并在 :checked 規范返回 true 時使用 transform 屬性更改狀態。

您可以使用這種方法實現各種目標。例如，當用戶單擊特定復選框時切換隱藏內容。它適用于單選框和復選框等輸入類型，但也可以應用于 <option> 和 <select> 元素。

在線演示地址：https://codepen.io/OMGZui/pen/yLvqwZW

8.文字描邊

要實現這樣一種文字描邊的效果，其實，我們只需要為文本屬性添加輪廓。

.custom-headline {
  color: transparent;
  -webkit-text-stroke: 1px #04D939;
}

9. Line Clamp

這個技巧可用于減少跨越多行的文本，我們只需要設置overflow:hidden即可。

.custom-button {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

10.固定頁面頭部

頁面頭部導航固定形式的效果，特別是頁面內容很長的一些布局，這個效果非常實用，也是很多網站上比較常見的效果。

.custom-table {
  thead tr {
    position: sticky;
    top: 0;
  }
}

11.Place Items

這是 grid 和 flexbox align-items 和 justify-items 的快捷屬性。

.custom-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center center;
}

12.顯示占位符

如果尚未填充是否需要突出顯示 <input> 或 <textarea> 元素？然后，你可以使用占位符來顯示其空間。

input:placeholder-shown {
  border-bottom: 2px solid #04D939;
}

13. @media (hover: hover) and (pointer: fine)

在移動設備上，hover 屬性可能存在問題。

每次點擊，懸停狀態也被執行。但是，@media(hover: hover) 和(pointer: fine) 中使用了:hover 屬性時，懸停只在非觸摸設備上可見。

這是懸停箭頭動畫的示例：

@media (hover: hover) and (pointer: fine) {
    arrow:hover {
      cursor: pointer;
      color: #027333;
      transform: translateX(0.5rem);
    }
  }

14.列數

此屬性可用于生成基本文本列數。

在此示例中，這里有兩個 <p> 標簽，列數為 2。

.wrapper {
  column-count: 2;
}

總結

今天的這篇文章中，我主要整理了14個比較有用的 CSS 技巧，這些 CSS技巧可以幫助我們提升開發效率，同時減少不必要的JavaScript代碼，充分發揮 CSS 的潛力，從而提升網站性能。

當然，這些技巧也不是最完美的，任何時候都是需要在開發時選擇最合適的實現方案即可。

而且，如果做得好，這將始終帶來更好的結果、更好的性能，并因此帶來更好的用戶體驗。

如果您有任何有趣且有用的 CSS 技巧，請在留言區告訴我。另外，別忘了關注我，一起保持持續學習的動力。

最后，開心學習，快樂編程。