5個(gè)你可能不知道的很棒CSS功能
英文 | https://javascript.plainenglish.io/the-6-powerful-javascript-object-methods-that-you-should-know-b2a659ddf3b5
翻譯 | web前端開發(fā)
介紹
1、 CSS calc ( ）函數(shù)
div {}
上面的示例創(chuàng)建了一個(gè)div，該div跨窗口延伸，并且div的兩側(cè)和窗口邊緣之間的間距為300px。
輸出結(jié)果如下：
你也可以通過Codepen查看線上的效果與完整源碼：https://codepen.io/MehdiAoussiad/pen/RwGNqPe
2、圓錐梯度函數(shù)
conic-gradient CSS中的功能使你可以輕松創(chuàng)建美觀的餅圖。
這是一個(gè)示例：
div{width: 300px;height: 300px;border-radius: 50%;background: conic-gradient(red 0% 20%, blue 20% 60%, black 60% 100%);}
如你所見，你只需要在函數(shù)內(nèi)指定顏色的開始和結(jié)束百分比。
輸出結(jié)果如下：
你也可以通過Codepen查看線上的效果與完整源碼：https://codepen.io/MehdiAoussiad/pen/ExNOXjN
3、writing mode
該屬性writing-mode將CSS中文本行的方向設(shè)置為垂直或水平。
代碼示例如下：
h1{writing-mode: vertical-lr;}h2{writing-mode: horizontal-tb;}
最終輸出效果：
你也可以通過Codepen查看線上的效果與完整源碼：https://codepen.io/MehdiAoussiad/pen/WNoYOEN
4、過濾功能
filter CSS中的函數(shù)用于將圖形效果應(yīng)用于元素。你可以實(shí)現(xiàn)很多的效果，因?yàn)檫^濾功能有很多其他的功能，如：（ 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中有兩個(gè)混合模式屬性：
mix-blend-mode ：定義元素和元素之間的混合。
background-blend-mode ：定義元素的背景顏色和背景圖像之間的混合。
這是一個(gè)例子：
.blend h1 {font-size: 150px;mix-blend-mode: overlay;}
示例輸出效果如下：
你也可以通過Codepen查看線上的效果與完整源碼：https://codepen.io/MehdiAoussiad/pen/OJbagdL
結(jié)論
CSS是一種很棒的樣式表語言，你必須是開發(fā)人員才能知道。你可以使用它創(chuàng)建很多令人驚奇的東西。你只需要練習(xí)就可以做到。
感謝你閱讀本文，希望對(duì)你有用。
本文完?
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方web前端開發(fā)
