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 的可能性是无限的！🥳
评论