CSS 规范只提供了一些基本的样式设置,如果想做出更炫酷的效果,就需要借助于 JS。但其实有一些效果通过 CSS 也可以做到,而且比起 JS 更省资源,效果也更好。

颜色渐变边框

颜色渐变的边框比单调的颜色更好看,但 border 却并不支持颜色渐变,而比起 border,background 可以更自由地设置颜色,所以可以通过设置背景颜色的方式迂回地展示出颜色渐变的边框

1div {
2    border: solid 2px transparent;
3    background-image: linear-gradient(#fff, #fff),
4                      linear-gradient(to right, #37b24d, #FF6F00);
5    background-origin: border-box;
6    background-clip: padding-box, border-box;
7}

实现原理为:

  1. 设置两个叠加显示的背景(background-image),第一个背景是纯色(#fff),显示在上,第二个则是渐变颜色(to right, #37b24d, #FF6F00),显示在下,被第一个背景完全遮蔽
  2. 让透明的边框挤压第一个背景的显示空间,导致第一个纯色背景的显示面积小于第二个渐变颜色背景

这就让第二个渐变颜色背景露出了一部分,看起来就像是边框

其中,

  • background-image 中两个颜色的顺序决定了显示层级,第一个比第二个层级更高,所以能显示在上
  • padding-box, border-box 可让两个背景颜色使用不同的绘制区域
  • 元素的背景区域 background-origin 默认值是 padding-box,此时渐变背景是填不满整个元素的,需要改为 border-box