阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

小編精選 - 技術文章翻譯 · 04月27日

5 個你不知道的隱藏 CSS 屬性

層疊樣式表 (CSS) 是網頁設計的支柱，讓開發人員可以輕鬆設計網頁的樣式和格式。雖然大多數開發人員熟悉顏色、字體大小和邊距等常見 CSS 屬性，但仍有許多鮮為人知的屬性可以為您的設計加入功能。在本文中，您將發現五個您可能不知道的 CSS 屬性，但它們可以顯著增強您的 Web 開發專案。

1. 文字修飾

.menu__list-link:hover {
  text-decoration: underline 2px solid green;
}

文字裝飾

變成經典的文字裝飾：底線你可以再增加 3 個參數。第一個是線條的寬度（2px），第二個是線條的類型（實線、點線），第三個是該線條的顏色（綠色）。

2. 文字下劃線偏移

.menu__list-link:hover {
  text-decoration: underline 2px solid green;
  text-underline-offset: 6px;
}

文字下劃線偏移

非常方便。解決當某些字母低於行高以及在懸停效果期間下劃線被這些字母打斷時經常發生的問題。建立從文字到下劃線的偏移（6px）是一個很好的解決方案。

3. 插圖

對於相對、絕對和其他定位，我們經常寫上、右、下、左：

  top: 5px;
  right: 3px;
  bottom: 1px;
  left: 4px;

為了加快編寫過程，我們可以用屬性 inset 來寫上面的較短版本：

inset: 5px, 3px, 1px, 4px;

4. 物體位置

我們經常對圖像應用 object-fit: cover - 它將圖像裁剪到指定的高度和寬度，以便看起來清晰：

物件適配：覆蓋

但我們無法控制它將裁剪影像的哪一部分。所以這就是物體位置發揮作用的地方。

.test {
  height: 350px;
  width: 500px;
  object-fit: cover;
  object-position: bottom;
}

物件位置：底部

object-position: top;

物件位置：頂部

我們也可以加：左或右。或者當我們指定 2 個參數時甚至可以更精確，例如 object-position: center Bottom;

5. 滾動邊距頂部

預設情況下，當我們連結到頁面<a href="#fairy-tale__inner">Itinery</a>上的部分時，它將準確地帶到該部分的頂部。

捲動邊距頂部

但如果我們想騰出空間，我們需要使用 scrool-margin-top

#fairy-tale__inner {
  scroll-margin-top: 100px;
}

捲動邊距頂部

所以，繼續吧，深入探索隱藏 CSS 屬性的世界，將您的設計提升到一個新的水平！

0個讚 0留言 138瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

精選技術文章翻譯，幫助開發者持續吸收新知。

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。