5个有用的CSS函数
时间：2023-03-11 23:01:45
科技观察
简介CSS包含了很多函数，它可以做很多早期需要JavaScript才能完成的事情。每年都会添加新功能，这让我们的开发变得更加简单，也减少了我们对JavaScript的依赖。CSS函数是它拥有的最强大的功能之一，在本文中，我将介绍一些我认为有用的功能。attr()attr函数用于获取被选元素的属性值。它接受三个参数，属性名称、类型和默认值。语法：attr(attribute-name?[,]?)示例：Thistextiscombinedwith
cssp::after{content:''attr(data-text);}p.attr:hover::after{content:''attr(data-tooltip);background-color:orange;color:white}效果：源代码：https://codepen.io/protic_milos/pen/GRpYJKdcalc()这个函数允许我们计算CSS值而不是指定精确值。通常用于计算元素的大小或位置。它支持加法、减法、乘法和除法。需要注意的是+和-运算符必须用空格分隔，否则将无法正常工作。*和/运算符没有此限制，但建议添加空格以保持一致性。另外，很酷的是我们可以混合使用CSS单位，例如，我们可以减去百分比和像素。我们可以使用calc构建一个居中元素的示例：
Centeredwithcalccssp.calc{padding:10px;background-color:orange;color:white;width:200px;text-aligncenter;margin-left:calc(50%-100px)}效果：源代码：https://codepen.io/protic_milos/pen/GRpYJKdvar()通过这个函数，我们可以将一个自定义属性的值作为另一个CSS属性的值。简单的说，我们可以定义一个颜色，比如把它放在一个自定义属性（CSS变量）中，然后通过调用var函数来重用那个属性值。与CSS变量一起，此功能提高了可维护性并减少了重复。一个用例是为网站创建主题。此函数接受两个参数，自定义属性和默认值，如果出现问题将使用默认值。:root{--bg-color:green;--color:white}p.var{background-color:var(--bg-color);color:var(--color)}效果：源码：https://codepen.io/protic_milos/pen/GRpYJKdcounter()就我个人而言，我从未使用过这种方法，但它看起来很有趣。该函数返回指定计数器的当前值，需要与计数器清零、计数器递增配合使用。我们可以用它来计算其他元素，例如有序列表。MarsBountySnickers 源代码：https://codepen.io/protic_milos/pen/GRpYJKdcircle()这个函数创建一个圆形区域来屏蔽它所应用的元素。您可以指定其半径和位置。通常与图像一起使用以创建圆形。这个函数是clip-path属性值。此外，值得一提的是，除了圆形之外，您还可以创建椭圆和多边形。
cssimg.circle{clip-path:circle(30%);}源代码：https://codepen.io/protic_milos/pen/GRpYJKd总结正如我之前多次提到的，在很多情况下开发人员忽略了CSS的可能性，从而失去了网站的简单性。每年我们都可以依靠CSS来赋予我们所需的设计能力，这很好，JavaScript应该专注于其他事情，而不是设计。作者：MilosProtic译者：FrontendXiaozhi来源：devinduct原文：https://devinduct.com/63/5-useful-css-functions代码注意。转载本文请联系大千世界公众号。
