5 個你可能不知道的很棒 CSS 功能

英文 | https://javascript.plainenglish.io/the-6-powerful-javascript-object-methods-that-you-should-know-b2a659ddf3b5

翻譯 | web 前端開發

介紹

=========

在過去的幾年中，CSS 有了很大的改進。總會有一些新功能出來，讓你感到驚訝。你可以使用 CSS 的功能來創建很多令人驚奇的東西，只需要有一點創意即可。

在今天的文中，我們將爲你提供一些你可能不知道，但是有用的 CSS 功能。

現在，讓我們開始吧。

1、 CSS calc ( ）函數

你可以採用 CSS 中的 calc( ) 函數來計算 CSS 屬性的大小值。它主要使用數學運算進行計算，例如的結果（+，-，*，/）。

這是一個示例：

div { 
 width：calc（100％-300px）; 
}

上面的示例創建了一個 div，該 div 跨窗口延伸，並且 div 的兩側和窗口邊緣之間的間距爲 300px。

輸出結果如下：

你也可以通過 Codepen 查看線上的效果與完整源碼：https://codepen.io/MehdiAoussiad/pen/RwGNqPe

2、圓錐梯度函數

conic-gradient CSS 中的功能使你可以輕鬆創建美觀的餅圖。

這是一個示例：

div{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(red 0% 20%, blue 20% 60%, black 60% 100%);
}

如你所見，你只需要在函數內指定顏色的開始和結束百分比。

輸出結果如下：

你也可以通過 Codepen 查看線上的效果與完整源碼：https://codepen.io/MehdiAoussiad/pen/ExNOXjN

**3、**writing mode

該屬性 writing-mode 將 CSS 中文本行的方向設置爲垂直或水平。

代碼示例如下：

h1{
  writing-mode: vertical-lr;
}
h2{
  writing-mode: horizontal-tb;
}

最終輸出效果：

你也可以通過 Codepen 查看線上的效果與完整源碼：https://codepen.io/MehdiAoussiad/pen/WNoYOEN

4、過濾功能

filter  CSS 中的函數用於將圖形效果應用於元素。你可以實現很多的效果，因爲過濾功能有很多其他的功能，如：（ blur，brightness，contrast，grayscale，hue-rotate，opacity，invert，sepia，）。saturatedrop-shadow

示例代碼例子：

img{
 filter: hue-rotate(-40deg);
}
/* Or */
.img2{
 filter: contrast(170%) saturate(80%) blur(1px);
}

示例輸出效果如下：

你也可以通過 Codepen 查看線上的效果與完整源碼：https://codepen.io/MehdiAoussiad/pen/JjRoeEL

5、混合模式

混合模式是已添加到 CSS 的驚人功能。CSS 中有兩個混合模式屬性：

mix-blend-mode ：定義元素和元素之間的混合。

background-blend-mode ：定義元素的背景顏色和背景圖像之間的混合。

這是一個例子：

.blend h1 { 
  font-size: 150px;
  mix-blend-mode: overlay;
}

示例輸出效果如下：

你也可以通過 Codepen 查看線上的效果與完整源碼：https://codepen.io/MehdiAoussiad/pen/OJbagdL

結論

CSS 是一種很棒的樣式表語言，你必須是開發人員才能知道。你可以使用它創建很多令人驚奇的東西。你只需要練習就可以做到。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/-KJ1dNti77DtVvCCgKOfIQ

猜你喜歡