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