5个好用的CSS函数，快来试试吧！
时间：2023-04-05 23:12:43
HTML5
作者：MilosProtic译者：前端小智来源：devinduct再次点赞，微信搜索【大千世界】，B站关注【前端小智】这个没有大厂背景，但是有一个积极的态度的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...介绍CSS包含了很多功能，它可以完成很多早期需要用JavaScript来完成的事情。每年都会添加新功能，这让我们的开发变得更加简单，也减少了我们对JavaScript的依赖。CSS函数是它拥有的最强大的功能之一，在本文中，我将介绍一些我认为有用的功能。attr()attr函数用于获取被选元素的属性值。它接受三个参数，属性名称、类型和默认值。语法：attr(attribute-name?[,]?)示例：此文本与
cssp::after{content:''attr(data-text);}p.attr:hover::after{content:''attr(data-tooltip);背景颜色：橙色；color:white}效果：源代码：https://codepen.io/protic_milos/pen/GRpYJKdcalc()该函数使我们能够计算CSS值，而不是指定精确值。通常用于计算元素的大小或位置。它支持加法、减法、乘法和除法。需要注意的是+和-运算符必须用空格分隔，否则将无法正常工作。*和/运算符没有此限制，但建议添加空格以保持一致性。另外，很酷的是我们可以混合使用CSS单位，例如，我们可以减去百分比和像素。我们可以使用calc构建一个带有居中元素的示例：
Centeredwithcalccssp.calc{padding:10px;背景颜色：橙色；白颜色;宽度：200px；文本对齐：居中；margin-left:calc(50%-100px)}效果：源代码：https://codepen.io/protic_milos/pen/GRpYJKdvar()通过这个函数，我们可以将一个自定义属性的值作为另一个属性的值CSS属性。简单的说，我们可以定义一个颜色，比如把它放在一个自定义属性（CSS变量）中，然后通过调用var函数来重用那个属性值。与CSS变量一起，此功能提高了可维护性并减少了重复。一个用例是为网站创建主题。这个函数接受两个参数，自定义属性和默认值，如果出现问题，将使用默认值。:root{--bg-color:绿色;--color:white}p.var{背景颜色：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应该专注于其他事情，而不是设计。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://devinduct.com/63/5-us...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博文早一两篇），本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，本人已整理我的很多文件。欢迎加星和改进。可以参考考点面试复习。另外，关注公众号，在后台回复福利，就可以看到福利，就知道了。
