本文共 1136 字，大约阅读时间需要 3 分钟。

CSS 函数

随手笔记， 我只记录重点的，常用的。

css函数有很多。 例如 rgba()， rgb()， hsla(), hsl(), linear-gradient()… 有兴趣自行了解吧

attr(); 返回选择元素的属性值。

获取父盒子的某一项 元素的值， (上手试试就知道了， 我形容 容易误解)

div:after {       content: " (" attr(class) ")"; }a:after {       content: " (" attr(href) ")"; }

calc(); 允许计算 CSS 的属性值，比如动态计算长度值。

使用 calc() 函数计算

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-”, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；

div {       width: calc(100px + 100px); // 200px    height: calc(200px - 100px); // 100px}

var(); 用于插入自定义的属性值。

函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。 (上手试试就知道了， 我形容 容易误解)

// 定义参数  必需。自定义属性的名称，必需以 -- 开头。:root {     --main-bg-color: red;  --main-txt-color: blue;  --main-padding: 15px;} // var() 函数使用方法#div1 {     background-color: var(--main-bg-color);  color: var(--main-txt-color);  padding: var(--main-padding);} #div2 {     background-color: var(--main-bg-color);  color: var(--main-txt-color);  padding: var(--main-padding);}

var(); 注意事项

参数

var(custom-property-name, value)custom-property-name	必需。自定义属性的名称，必需以 -- 开头。value	可选。备用值，在属性不存在的时候使用。

觉得有用就点赞关注加评论吧，

觉得哪里有问题可以评论留言。