css函数

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	可选。备用值，在属性不存在的时候使用。

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

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