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 的滤镜呢?🙃滤镜可以改变图像的显示效果,包括 blurbrightnesscontrastgrayscalehue-rotateopacityinvertsepiasaturatedrop-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 的可能性是无限的!🥳

评论

Loading comments ...