CSS 可以做到这一点吗？

CSS 可以做的令人惊奇的事情的列表！

编辑：由于支持问题，部分属性在某些浏览器中无法使用。我们可以使用 来检查浏览器支持情况@supports，并相应地添加后备样式。请使用 Chrome 查看示例 🙂

1.box-decoration-break

此 CSS 属性指定当元素的片段跨越多行、多列或多页时应如何呈现。

2.attr()

我们可以使用 检索 CSS 中所选元素的值attr()。此方法对于可访问性目的非常有用。

3.backface-visibility

此 CSS 属性设置元素背面朝向用户时是否可见。想打造卡片式翻页 UI 吗？

4.conic-gradient

渐变真是个好东西。你可能习惯用线性渐变来设计背景，但你知道吗，我们也可以借助纯 CSS 来创建饼图conic-gradient！

为了更好地理解如何操作conic-gradients，请参考MDN 文档

5.filter

有了 CSS 滤镜，谁还需要 Photoshop 滤镜效果呢？🙃滤镜函数可以对输入图像的外观进行图形化更改。我们可以实现的效果
如下：blurbrightnesscontrastgrayscalehue-rotateopacityinvertsepiasaturatedrop-shadow

drop-shadow滤镜非常棒。它可以让你给输入图像添加阴影。

6.mix-blend-mode

此 CSS 属性设置元素的内容应如何与元素背景或其父元素的内容混合。

将混合模式和滤镜与图像和文本混合，可以实现令人惊叹的效果。了解更多，请访问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: transparentCSS 属性的组合实现的。

11. 平滑滚动捕捉

scroll-snap-typeCSS 属性设置如何在滚动容器上应用捕捉点。

此示例显示了y值为 的垂直 () 滚动mandatory。MDN文档很好地解释了如何使用其他值，例如proximity和水平滚动 ( x)。

这些只是 CSS 的一些精彩功能。可能性无穷无尽！🥳