5个有用的CSS函数
时间：2023-04-02 16:00:10
HTML
作者：MilosProtic译者：FrontendXiaozhi来源：devinduct喜欢再看，养成习惯本文已经收录在GitHubhttps://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...干货交流系列文章总结如下。https://github.com/qq44924588...我是小智，公众号《大招天下》的作者，前端技术爱好者。我会经常分享自己学习看到的干货，在进步的路上互相鼓励！关注公众号，后台回复福利，就能看到福利，你懂的。
