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