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是一種很棒的樣式表語言，你必須是開發人員才能知道。你可以使用它建立很多令人驚奇的東西。你隻需要練習就可以做到。

感謝你閱讀本文，希望對你有用。

本文完〜