css -- 函數 · 前端知識 -- 學習整理

>[success] # css 常用函數 * 比如**rgb/rgba/translate/rotate/scale**等 >[danger] ##### 其他常用函數 -- var * **var:** 使用CSS定義的變量，css 也可以自定義屬性，自定義規則需要，**屬性名**需要以**兩個減號**（--）**開始**，定義屬性值可以是**任意有效的css值** * 規則集定義的選擇器, 是自定義屬性的可見作用域(只在選擇器內部有效)，為了讓全局自定義屬性生效推薦將自定義屬性定義在**html**中，也可以使用 `:root` 選擇器; ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> :root{ /* 自定義的變量名需要-- 開頭，后面可以配置任意css 屬性下面案例定義兩個屬性名分別是--background-color 和 --main-widthA */ --background-color:red; --main-widthA:130px; } .main{ /* 通過var 使用自定義函數 */ width: var(--main-widthA); background-color: var(--background-color); /* 不生效不在同一個作用域 */ color: var(--font-color); } .other{ /* 定義 */ --font-color:#eee; /* 使用 */ color: var(--font-color); } </style> </head> <body> <div class="other">123</div> <div class="main"> 123 </div> </body> </html> ~~~ >[danger] 其他常用函數 -- calc * 計算支持加減乘除的運算,**\+ 和 -** 運算符的兩邊必須要有**空白字符** ~~~ div{ calc(100% - 23px); } ~~~