今天列举5个CSS函数，从使用频率从高到低排列。
calc()
最著名的CSS函数。
支持加法、减法、乘法和除法，支持括号运算。为一致性考虑，运算符前后必须加空格。
支持百分比与具体数值混合运算。
水平垂直居中案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
background: gray;
}
body {
position: relative;
}
.center {
position: absolute;
top: calc((100% - 200px) / 2);
left: calc((100% - 300px) / 2);
width: 300px;
height: 200px;
background: white;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
var()
与CSS变量配合使用的函数。关于CSS变量可以看我写的文档https://www.jianshu.com/p/a0f6233cf335。
var()可以与calc()混合使用，还是上方案例，我们稍微改改，用变量声明宽高，且参与calc运算：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 清除默认样式 */
* {
padding: 0;
margin: 0;
}
/* 令html和body全屏显示, 并有一个灰色背景 */
html,
body {
height: 100%;
background: gray;
}
/* 先在父元素上设置相对定位 */
body {
position: relative;
--width: 300px;
--height: 200px;
}
.center {
/* 绝对定位 */
position: absolute;
/* 减去的值是height和width的一半 */
top: calc((100% - var(--height)) / 2);
left: calc((100% - var(--width)) / 2);
/* 给定宽高 */
width: var(--width);
height: var(--height);
/* 白色背景 */
background: white;
}
</style>
</head>
<body>
<div class="center"></div>
</body>
</html>
counter()
counter()函数返回指定计数器的当前值，需要与counter-reset和counter-increment配合使用。它只能用在伪元素的content的值里。
它在CSS里属于稍复杂的玩意。
-
首先给父元素设counter-reset，它的值可以随便写，只是一个标记，写成
abcxxx都行，但是最好写成有意义的单词，比如count。 -
给子元素统一设上counter-increment: count;，count就是父元素设的那个单词。
-
子元素的::before，设上content: counter(count, lower-roman) '. ';，这里
counter(count, decimal) '. '前面的counter函数和后面的'. '是拼接字符串关系，中间敲个空格。 -
counter(count, lower-roman)这种2参数写法是高级用法，第一个参数就是上文提到的标记，没啥可说的，第二个参数lower-roman是计数器样式，也就是说，并不一定只显示12345，还可以显示abcde以及更奇怪的样式，比如小写罗马数字等，这个decimal并不是随便写的，是有规定的（例如：disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin），这块知识就需要查更多资料，我就不说了。
比如：
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div.counter {
counter-reset: count;
list-style: none;
padding: 0;
margin: 0
}
div.counter>div {
counter-increment: count;
}
div.counter>div::before {
content: counter(count, lower-roman) '. ';
color: orange;
}
</style>
</head>
<body>
<div class="counter">
<div>张三</div>
<div>李四</div>
<div>王五</div>
</div>
</body>
</html>
大标题套小标题：
这可能是更有意义的一种用法，直接看这个案例即可：https://www.runoob.com/try/try.php?filename=trycss_gen_counter-reset
attr()
attr()分为老语法和新语法，先说老语法。
attr()老语法不太好玩，它用于获取写在html上的某节点任意属性（包括href之类）的内容，它跟counter()类似，也限制很大： 只能用在该节点的伪元素的content的值里。比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.button {
width: attr(data-width); /* 无效 */
}
.button::after {
content: attr(data-title);
width: attr(data-width); /* 无效 */
}
a::after {
content: attr(href);
}
</style>
</head>
<body>
<div class="button" data-title="我是提示" data-width="200px">我是按钮</div>
<a href="http://www.baidu.com">链接</a>
</body>
</html>
attr()旧版语法最大的用途可能就是把<a>标签的href显示在元素后面吧。
attr()新语法见张鑫旭的https://www.zhangxinxu.com/wordpress/2020/10/css-attr-polyfill/，但是目前没有任何浏览器支持。
clip-path的几个函数
clip-path直译过来就是裁剪路径，使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍 clip-path的：
clip-path属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg，或者定义路线的方法例如circle()。clip-path属性代替了现在已经弃用的剪切 clip属性。
clip-path的函数具体就不举例了，可以看clip-path相关知识。
网友评论