css 按钮 函数,学习CSS函数

今天列举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相关知识。