CSS Functions

背景

CSS是一個聲明式的語言，主要爲標記語言服務。並不具備很強的邏輯能力等。隨着CSS的不斷變革，CSS中也有具備了函數和運算相關的能力。

CSS函數

語法

function-name('參數/符號')
複製代碼

如：

calc(100%-40px)
複製代碼

css函數不徹底列表：

• 屬性函數：attr()
• 背景圖片函數：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()
• 顏色函數：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()
• 圖形函數：circle()、ellipse()、inset()、polygon()、path()
• 濾鏡函數：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()
• 轉換函數：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()
• 數學函數：calc()、min()、max()、mixmax()、repeat()
• 緩動函數：cubic-bezier()、steps()
• 其餘函數：counter()、counters()、toggle()、var()、 symbols()

介紹幾種相對較經常使用的CSS函數

attr()

attr() 函數返回選擇元素的屬性值。

<span class="tooltip-toggle" 
      aria-label="Sample text for your tooltip!" 
      tabindex="0"> 

.tooltip-toggle::before { content: attr(aria-label); }
複製代碼

示例1 示例2

calc()

calc()能夠說是一個計算器，咱們能夠在裏面運行咱們的計算表達式。

.element {   
  width: calc(expression);  
}
複製代碼

image()

功能和url()函數相似，只是功能更爲強大。能夠指定回退圖像，對具備方向的圖像進行註釋等。

.special { color: white; 
	background: image("dark.png", black); }
複製代碼

相似於background-image經過url()加載失敗時，採用background-color作爲降級。

image(ltr "arrow.png")
image(rtl "arrow.png")
複製代碼

補充：關於ltr和rtl

element()

能夠將網站中的某部分看成圖片渲染（僅Firefox支持這個特性）

<div id="css-source"> 
	<p>Lorem ipsum</p> 
   	<img src="" alt="">
</div> 
<div id="css-result"></div> 
#css-result { background: element(#css-source); 
		background-size: 50% 50%; }
複製代碼

示例

濾鏡函數

filter能夠用來作各類濾鏡（webkit支持，高版本）

element {
  filter: none | <filter-function > [ <filter-function> ]* 
}
複製代碼

濾鏡函數：模糊blur()、亮度brightness()、對比度contrast()、陰影drop-shadow()、灰度grayscale()、hue-rotate()、invert()、透明度opacity()、saturate()、sepia()

grayscale{-webkit-filter:grayscale(1);}
複製代碼

轉換函數

轉換函數指的是CSS的transform中用到的屬性值。

示例

數學函數

• calc() 前面介紹了
• min() 最小值
• max() 最大值
• clamp()
• minmax() 最小最大值範圍

toggle()

該函數容許後代元素循環遍歷一個值列表(瀏覽器仍不支持)

ul{list-style-type:disk;}
li > ul{list-style-type:toggle(disk,circle,square,box);}
複製代碼

var()

用來調用CSS中自定義屬性

:root { --color: red } 

.test { color: var(--color) }
複製代碼

其餘

counter()、counters()、toggle()、var()和symbols()

瞭解更多

www.quackit.com/css/functio…