# CSS 提效技巧
# 渐变文字
h1 {
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
1
2
3
4
5
6
2
3
4
5
6
# 修改 media defaults
编写 css 重置时，添加这些属性以改善媒体默认值。
img,
picture,
video,
svg {
max-width: 100%;
object-fit: contain; /* preserve a nice aspect-ratio */
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# column count
使用列属性为文本元素制作漂亮的列布局。
p {
column-count: 3;
column-gap: 5rem;
column-rule: 1px solid salmon; /* border between columns */
}
1
2
3
4
5
2
3
4
5
# hyphens
hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。
# clamp() 函数
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
h1 {
font-size: clamp(5.25rem, 8vw, 8rem);
}
1
2
3
2
3
# 自定义光标
html {
cursor: url("no.png"), auto;
}
1
2
3
2
3
# caret-color
caret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。
# text-indent
text-indent 属性能定义一个块元素首行文本内容之前的缩进量。
p {
text-indent: 5.275rem;
}
1
2
3
2
3
# list style type
CSS 属性 list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。
li {
list-style-type: "";
}
1
2
3
2
3