css 計算值函數


css有一些強大的函數:

1. calc

可以混合多種單位來計算

div {
    font-size: calc(100vw/5 + 1rem - 100px)
}

 

2. max、min、clamp

max、min選最大/小的那個

clamp() 則是給一個值限定一個范圍,超出范圍外則使用范圍的最大或者最小值。(現在帶webkit前綴可以使用)

div{
    width:max(10% + 20px, 300px);
}

 

3.toggle

toggle() 函數在規則選中多於一個元素時生效,它會在幾個值之間來回切換,比如我們要讓一個列表項的樣式圓點和方點間隔出現,可以使用下面代碼:

ul { 
    list-style-type: toggle(circle, square); 
}

 

4.attr

用來獲取元素的屬性值,目前只能在content處使用

<div data-name="abc" title="123"></div>

<style>   div:before { content:attr(data-name)" "attr(title); } </style>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM