CSS 包含了許多函數,而且它能夠完成許多早期需要用 JavaScript才能完成的事情。每年都有新的特性加入進來,這讓我們的開發更加輕鬆,也減少了對JavaScript的依賴。 CSS 函數是它所具有的最強大的特性之一,在本文中,我將介紹一些我認為有用的函數。
(學習影片分享:css影片教學)
attr
函數用於取得所選元素的屬性值。它接受三個參數,屬性名稱
,類型
和預設值
。
語法:
attr( attribute-name <type-or-unit>? [, <fallback> ]? )
範例:
<p data-text="the attr function" data-tooltip="Hi from attr!" class="attr">This text is combined with</p>
css
p::after { content: ' ' attr(data-text); } p.attr:hover::after { content: ' ' attr(data-tooltip); background-color: orange; color: white }
效果:
##原始碼:https://codepen.io/protic_milos/pen/GRpYJKd
calc()這個函數讓我們能夠計算CSS值,而不是指定確切的值。通常用於計算元素的大小或位置。它支援加法、減法、乘法和除法。
是
和-運算子必須用空格隔開,不然無法正常運作。 *
/
運算子不有此限制,但出於一致性的考慮,建議添加空格。 另外,很棒的是,我們可以混合CSS單位,例如,我們可以減去百分比和像素。我們可以用
calc
<p class="calc">Centered with calc</p>css
p.calc { padding: 10px; background-color: orange; color: white; width: 200px; text-align:center; margin-left: calc(50% - 100px) }效果:
var函數重複使用該屬性值。
與CSS變數一起,該函數提高了可維護性並減少了重複。一個用例是為網站創建主題。
:root { --bg-color: green; --color: white } p.var { background-color: var(--bg-color); color: var(--color) }效果:
就我個人而言,我從未使用過這種方法,但它看起來很有趣。這個函數傳回指定計數器的目前值,需要與
counter-reset
counter-increment
搭配使用。 我們可以用它來計算其他元素,例如有序列表。<div> <span>Mars</span> <span>Bounty</span> <span>Snickers</span> </div>
clip-path屬性值。
另外,值得一提的是,除了圓形之外,您還可以建立橢圓形和多邊形形狀。 ###<img alt="5個有用的css函數(分享)" >###css###
img.circle { clip-path: circle(30%); }###################原始碼:https://codepen.io/protic_milos/pen/GRpYJKd##### #總結######正如我之前多次提到的,在很多情況下,開發人員都忽略了CSS的可能性,因此失去了web網站的簡單性。每一年我們都可以依靠CSS為我們提供所需的設計能力,這很好,JavaScript 應該把注意力放在其他事情上,而不是設計上。 ######更多程式相關知識,請造訪:###程式設計入門###! ! ###
以上是5個有用的css函數(分享)的詳細內容。更多資訊請關注PHP中文網其他相關文章!