今天列举5个CSS函数,从使用频率从高到低排列。
calc()
最著名的CSS函数。
支持加法、减法、乘法和除法,支持括号运算。为一致性考虑,运算符前后必须加空格。
支持百分比与具体数值混合运算。
水平垂直居中案例:
* {
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;
}
var()
var()可以与calc()混合使用,还是上方案例,我们稍微改改,用变量声明宽高,且参与calc运算:
/* 清除默认样式 */
* {
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;
}
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
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;
}
大标题套小标题:
attr()
attr()分为老语法和新语法,先说老语法。
attr()老语法不太好玩,它用于获取写在html上的某节点任意属性(包括href之类)的内容,它跟counter()类似,也限制很大: 只能用在该节点的伪元素的content的值里。比如:
.button {
width: attr(data-width); /* 无效 */
}
.button::after {
content: attr(data-title);
width: attr(data-width); /* 无效 */
}
a::after {
content: attr(href);
}
attr()旧版语法最大的用途可能就是把标签的href显示在元素后面吧。
clip-path的几个函数
clip-path直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍 clip-path的:
clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域。剪切区域是被URL定义的路径代替行内或者外部svg,或者定义路线的方法例如circle()。clip-path属性代替了现在已经弃用的剪切 clip属性。
clip-path的函数具体就不举例了,可以看clip-path相关知识。