JZTXT

css-6个可以在css属性中使用的函数

发布时间 2023-03-27 09:31:51作者: Yancy00

1- calc计算结果

div{
    width: calc(100vm - 50px);
}

2- var它可以将 CSS变量的值赋予属性

:root {
--main-bg-color: coral;
--main-padding: 15px;
}

div{
background-color: var(--main-bg-color);
padding: var(--main-padding);
}

3- url() 用于描述或识别我们项目中文件的位置

background-image: url("pic.gif");

4- rgb() 和 rgba() 用于描述 CSS 中的颜色

color: rgb(0, 0, 0);
color: rgba(0, 0, 0, 1);

5- hsl() 代表色相、饱和度和亮度

div{
    background: hsl(0, 100%, 50%);
}

6- :not() 函数用于将样式应用于没有特定类或 ID 的特定元素

img:not(.pic){
    padding: 0;
    opacity: .5;
}