CSS函数指南

最新推荐文章于 2024-06-09 00:26:22 发布

墨萧随笔

最新推荐文章于 2024-06-09 00:26:22 发布

阅读量724

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_43699214/article/details/109257090

版权

在编程语言中，函数是执行特定任务的一段代码，像其他编程语言一样，CSS也有自己的函数，可以在插入值的地方使用，或者和其他值混合使用，下图是一段使用函数的css定义：

在这里插入图片描述
不像其他编程语言的函数输出，CSS函数的输出会产生视觉上的影响，如下面的例子会对使用了has-orange-glow这个类的元素产生橙色外发光效果:

.has-orange-glow {
  filter: drop-shadow(0.25rem 0 0.75rem #ef9035);
}

url()
url函数可以链接到其他资源以加载它们。这可以包括图像，字体，甚至其他样式表。出于性能方面的考虑，最好限制通过加载的内容url()，因为每个声明都是一个附加的HTTP请求
attr()
attr()用来获取html属性并把获取到的值赋值给content属性
calc()
calc()函数接收带单位或不带单位的数字计算式，把结果赋值给相应属性，不像css预处理器，这个函数可以混合单位计算，比如可以用100%-6rem，并且参数可以是响应式的。例如100%代表宽度，随着宽度的变化，相应的值也会变化。
lang()
:lang()根据html元素的lang属性不同设置不同的样式，一般用于特定于语言的样式
:not()
:not()函数选择指定范围内的不是参数元素的元素，参数只支持单个选择器，但是以逗号分隔的选择器目前也支持。

var()函数用来引用在:root元素中定义的属性值，结合calc()函数使用，不依赖预处理器就能达到css模块化编程方式，再结合javascript动态改变css属性的值，能大大减少代码量。

另一个常见的函数就是颜色函数，用红绿蓝三个分量表示颜色的rgb() 和 rgba()，还有用色调、饱和度、亮度表示颜色的函数hsl() 和 hsla()

这里的介绍的函数都属于CSS3transform属性

scaleX(), scaleY(), scaleZ(), scale3d(), and scale()
这些伸缩函数可以让元素沿着一个或多个坐标轴改变尺寸大小
translateX(), translateY(), translateZ(), translate3d(), and translate()
translate函数可以让元素沿着一个或多个坐标轴平移指定的像素距离
perspective()
透视函数，可以改变元素外观看起来就像从背景突出来
rotateX(), rotateY(), rotateZ(), rotate3d(), and rotate()
沿着一个或多个坐标轴旋转指定像素
skewX(), skewY(), and skew()
和前面的函数不同，形变函数可以让元素沿着指定坐标轴产生形变

关于更多的transform函数效果，可以查看一个有趣的可视化工具

这里的函数运用在css属性filter属性以实现类似Photoshop这样的软件，有一个css库cssgram来实现滤镜效果。

@media (inverted-colors: inverted) {
  img,
  video {
    filter: invert(100%);
  }
}

opacity()
控制元素及其子元素的透明程度
saturate()
增强或降低应用元素的饱和度，一般用来解决照片曝光不足的问题。
sepia()
可以让照片看起来有复古的效果。
drop-shadow()
这个函数可以让应用的元素产生悬浮在页面之外的视觉效果，和box-shadow不同的是，这个函数应用于元素的外形而不是元素的边框。
hue-rotate()
顾名思义色彩旋转，可以让应用的元素每个像素相对于起始值便宜指定角度，让有很多颜色的照片产生迷幻的效果。
filter()
这是一个SVG滤镜函数，可以导入SVG滤镜创建特殊的视觉效果，这里有一篇文章介绍相关的用法

渐变函数可以创建颜色的变化范围，可以指定颜色值，渐变位置和渐变角度。

linear-gradient() 和 repeating-linear-gradient()
线性渐变应用于从一点到另一点的直线上的颜色变换，直线也可以设置一个角度。repeating-linear-gradient()可以描述重复的线性渐变，直到区域被填充满。
radial-gradient() 和 repeating-radial-gradient()
径向渐变很像线性渐变，只是颜色转换不是直线，而是从中心点向外辐射
conic-gradient() 和 repeating-conical-gradient
围绕着圆形来变换颜色，可以创建比较酷的效果，只是浏览器支持度还不是很好