2020年值得一用的11个CSS新功能
你可能很熟悉CSS，使用CSS可以创建出各种精美的网页版面。然而一时的熟悉是不够的，随着互联网的不断发展，作为核心客户端技术之一的CSS也在不断进化。接下来，我将介绍11个比较新的CSS功能，你可以尝试应用在自己的网站上。
在尝试本文介绍的CSS功能之前，你需要准备好一款现代浏览器，推荐Firefox或Chrome浏览器。部分版本的浏览器可能还没有对针对新的CSS进行更新，无法渲染出对应的效果。
01 文字描边（text-stroke）
如果你熟悉Adobe Illustrator等矢量编辑软件，应该使用过类似文字描边的功能。而如今，这一功能被加入到了CSS属性中。
文字描边（text-stroke）可以应用CSS动画，但只有描边颜色可以受影响，描边宽度则不行。
footer h3 {
/*more styles in style.css*/
/*...*/
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #000;
}02 首字母选择器（:first-letter）
我们经常在报纸、杂志上看到首字母或首文字放大的效果，如今新的CSS选择器（:first-letter）可以帮助我们对首字母单独赋予属性，实现类似的效果。
p.intro:first-letter {
font-size: 100px;
display: block;
float: left;
line-height: .5;
margin: 15px 15px 10px 0 ;
}03 渐变文字
现在设置渐变文字比过去要简单得多，因为CSS现在支持将文字作为背景（background）的蒙版。
h2.contact-heading {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background: radial-gradient(#ffbc00, #ff65aa);
}当然，使用这个特性，你也可以用文字给背景图片制作蒙版，用CSS实现许多过去平面设计软件才能实现的的效果。
04 文本截断（line-clamp）
文本截断（line-clamp）属性可以在特定行数处截断文本，以实现对行数的绝对控制。
你需要配合至少3个其他属性来使用它：display要设置为-webkit-box 或-webkit-inline-box，-webkit-box-orient要设置为vertical，而overflow要设置为hidden。如果不这样设置，文本就不会被截断。
p.shortened {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}05 内容分列（column-count）
使用内容分列（column-count）属性，可以将内容均等分为多列显示。
.outro {
column-count: 2;
}06 文字限宽
部分网页会用到等宽字体等对宽度有特殊要求的字体，而当客户端不支持对应字体的时候，就无法实现对应的效果。CSS现在引入了ch值的概念，一个0字符的宽度为6ch，你可以设置对应的ch值来限制文字的宽度。
h2.contact-heading {
/*more properties in the CSS file*
…
max-width: 8ch;
}附加 断字标签（<wbr>）
虽然我们教程是关于CSS的，但既然我们说了这么多关于文本的CSS，这里我想提一句HTML。现在HTML加入了<wbr>标签，在内容超出宽度需要自动换行时，会优先在<wbr>标签的位置进行换行，这样可以让效果更可控。
<wbr>+0043<wbr>234-343<wbr>234-234<wbr>07 适配对象（object-fit）
在容器中的图片如何适配容器尺寸？这个问题可以被新的适配对象（object-fit）属性完美解决。如果容器中有尺寸变化的<img>或<video>标签，可以用object-fit属性让它进行自适应。object-fit有4个可选的值：fill、contain、cover和scale-down。举例来说，如果使用cover，容器中的图片会在保持长宽比的情况下尽量填满容器。
.object-fit {
object-fit: cover;
height: 400px;
width: 100%;
}08 锥形渐变（conic-gradient）
在过去，绘制扇形图几乎必须用到Javascript，而现在有了锥形渐变（conic-gradient）属性，CSS也可以独立做到了。锥形渐变是一种垂直于半径方向的渐变，和径向渐变（radial-gradient）是不同的。
.piechart {
background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d 56% 100%);
border-radius: 50%;
width: 300px;
height: 300px;
}09 计数器（counter）
如果你拥有一个非编号列表，通过CSS怎么将它转化为编号列表呢？这就要用到计数器（counter）属性了。
在content属性中加入counter() 或counters()函数即可对特定内容进行计数。counter的数值可以使用counter-increment进行增减。
ol.numbered-list > li:before {
content: counter(li);
position: absolute;
box-sizing: border-box;
width: 45px;
height: 45px;
background: #f3b70f;
border-radius: 50%;
}
ol.numbered-list li {
position: relative;
left: 0px;
list-style: none;
counter-increment: li;
}10 选区颜色（::selection）
新的伪元素选区颜色（::selection）可以覆盖浏览器的默认设置，修改文字选区的颜色。使用鼠标选中对应文字后，即可看到对应颜色。
::selection {
background-color: #f3b70f;
}
11 兼容判断（@support）
我们在文章开头就说过，某些浏览器可能不支持特定CSS样式。而有了兼容判断（@support）属性，我们可以某种程度上解决这个问题。@support会检查浏览器是否支持特定的CSS样式，如果支持，@support下的CSS样式才会被渲染。
@supports (text-stroke: 4px navy;) {
.example {
text-stroke: 4px navy;
}
}对于甚至不能识别@support的浏览器，@support下的CSS样式也不会被渲染。你可以通过设置多个@support，根据浏览器对不同属性的支持与否，灵活地分配多种CSS样式。
