查漏补缺——说说background-image属性

问题

如题所示

答案

相关源码如下：

hr {
  margin: 40px 0;
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 109, 109, 0.75), rgba(0,0,0,0));
}

忘记hr是什么东西了？

hr标签html样式,hr标签样式修改及美化（css的hr标签实现精美线条）

原来hr是分割线。

CSS background-image属性

这个属性将背景当做图片，而这里就是将hr当做图片用。它的这个属性值linear-gradient就是为这个hr开启线性渐变模式，to right这个参数表示hr分割线向右开始渐变，渐变的颜色按照上面的三种颜色，从左向右渐变。

最后的效果是这样的：