CSS 还能干这个？

Ananya Neogi 原作，授权 New Frontend 翻译。

CSS 可以做很多事，这会是一份让人大吃一惊的列表！

注意：有些属性并没有被所有浏览器支持。我们可以通过 @supports 检查浏览器是否支持某个特性，并添加相应的回退样式。推荐使用 Chrome 浏览器查看下面的例子 🙂

1 box-decoration-break

这个 CSS 属性可以指定渲染 HTML 元素时如何断行、分栏、分页。

2 attr()

我们可以用 attr() 获取特定元素的值。这在增强可访问性时尤为有用。

3 backface-visibility

这个 CSS 属性可以指定翻转元素后，元素的背面是否可见。下面是一个翻转卡片的例子：

4 conic-gradient

渐变很赞。你可能使用过线性渐变作背景，但你知道利用 conic-gradient 可以用纯 CSS 实现饼状图吗？

如果你想要了解更多 conic-gradients 的使用方法，请参阅 MDN 文档。

5 滤镜

CSS 都有滤镜了，谁还需要 photoshop 的滤镜呢？🙃滤镜可以改变图像的显示效果，包括 blur、brightness、contrast、grayscale、hue-rotate、opacity、invert、sepia、saturate、drop-shadow。

drop-shadow 滤镜非常赞，可以在图片上加上投影。

6 mix-blend-mode

这个 CSS 可以控制元素的内容和背景或父元素的混合效果，类似 photoshop 的混合图层。

在图片和文字上组合应用 mix-blend-mode 和滤镜能达成非常棒的效果。请参阅 MDN 文档 了解详情。

7 first-letter

首字下沉是书籍杂志的排版印刷上我最喜欢的东西之一。这个效果可以通过 first-letter 伪元素实现。

8 shape-outside

这个 CSS 属性让我们可以定制行内元素环绕复杂对象的效果。

请在新窗口中打开上面的例子，然后改变窗口大小，观察文本的环绕方式如何变化。

9 writing-mode

这个 CSS 属性可以控制横排、竖排，包括：

• horizontal-tb：内容横向从左往右，纵向从上往下。下一行在前一行的下方（横排）。
• vertical-lr：内容纵向从上往下，横向从左往右。下一行在前一行的右方（竖排）。
• vertical-rl: 内容纵向从上往下，横向从右往左。下一行在前一行的左方（竖排）。

请看这个示例网页。

10 给文字添加渐变

组合使用 -webkit-background-clip: text 和 -webkit-text-fill-color: transparent 这两个属性可以实现这个效果。

11 平滑滚动界限

scroll-snap-type CSS 属性可以控制滚动界限。

上面的例子展示了如何通过 scroll-snap-type: y mandatory; 控制纵向滚动。MDN 文档很好地解释了包括 proximity 和横向滚动（x）在内的其他一些用法。

上面仅仅是一些例子，CSS 还能做更多。CSS 的可能性是无限的！🥳