5个好用的css函数

「这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战」

作者： Milos Protic 译者：前端很美 来源：devinduct

css有一系列的函数，他能实现你以为只有js能实现的功能，每一年都会增加新的特性，从而制作动画而更少的依赖js。函数是css特性之一，以下介绍5个常用的css函数。

attr()

attr 函数用于获取被选元素的属性值。 它接受三个参数，属性名称、类型和默认值。 一个示例用法是用纯CSS实现tooltip功能。

<p data-text="the attr function"
  data-tooltip="Hi from attr!" class="attr">This text is combined with</p>

p::after {
  content: ' ' attr(data-text);
}

p.attr:hover::after {
  content: ' ' attr(data-tooltip);
  background-color: orange;
  color: white
}

如您所料，输出将文本与attr函数组合。 如果将鼠标悬停在段落上，文本将发生变化。
查看效果 codepen

calc()

这个函数使我们能够计算CSS值，而不用指定确切的值。 通常用于计算元素的大小或位置。 它支持加法、减法、乘法和除法。

这里要提到的一个重要的事情是，+和-运算符后面必须要接一个空格，否则将不起作用。* 和/没有这个要求，但由于一致性建议添加它们。

此外，一个很棒的事情是我们可以混合 CSS 单位，这意味着我们可以减去百分比和像素，例如。

来看一个带有居中元素的示例。

<p class="calc">Centered with calc</p>

p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align:center;
  margin-left: calc(50% - 100px)
}

查看效果 codepen

var()

借助这个函数，我们可以将自定义属性的值用作另一个 CSS 属性的值。 更简单地说，我们可以定义一种颜色，例如，将其放置在自定义属性（CSS 变量）中，并通过var函数使用该属性值。 与 CSS 变量一起，此功能提高了可维护性并减少了重复。

此函数接受两个参数，自定义属性和一个默认值，

:root {
  --bg-color: green;
  --color: white
}

p.var {
  background-color: var(--bg-color);
  color: var(--color)
}

查看效果 codepen

counter()

很早之前，计数器仅存在于ul，ol等元素中，如何想给其他元素增加计数，就只能通过list-style-image，或者background-image来实现。不过现在css3增加了counter函数，可以实现任何元素的计数作用。该函数与counter-reset以及counter-increment一起完成功能。

<div class="counter">
  <span>Mars</span>
  <span>Bounty</span>
  <span>Snickers</span>
</div>

div.counter {
  counter-reset: count;
  list-style: none;
  padding: 0;
  margin: 0
}

div.counter > span {
  counter-increment: count;
}

div.counter > span::before {
  content: counter(count, decimal) '. ';
  color: orange;
}

查看效果 codepen

circle()

此函数使用一个已知的图形来创造一个圆形。 您可以指定其半径和位置。 通常与图像一起使用以创建圆形。 此函数的结果往往用做clip-path属性的值。

<img class="circle" 
  src="https://devinduct.com/Uploads/PostImages/1122dcb9-954a-4641-9ca6-c38e9472698f.png"
/>

img.circle {
  clip-path: circle(30%);
}

查看效果 codepen

总结

很多时候，开发人员忽略了CSS的能力，我们应该更多使用css解决设计方面的问题，JavaScript 应该专注于其他方面，而不是设计。