CSS设置边框渐变颜色

Question

如何用渐变颜色制作一个简单的边框底色？

​

div{
  border-bottom:10px solid linear-gradient(#FF4000, transparent);
  height:20px;
  width:auto;
  background:#ccc;
  }

<div></div>

​

Answer 1

使用:after伪元素和linear-gradient可以获得所需的结果。在这段代码中，我在:after伪元素上使用了background:liner-gradient，只使用了一个元素。

如果您针对的是较旧的浏览器，则可能还必须使用浏览器前缀。

还要检查一下Demo。

​

div {
  height: 100px;
  border: 1px solid red;
  position: relative;
}
div:after {
  height: 2px;
  width: 100%;
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

<div>Hi</div>

​

Answer 2

要在单个边框(或多个边框)上设置边框渐变，只需在CSS中为以下内容声明样式规则：

• border-image
• border-image-slice
• border-image-width

​

.box {
width: auto;
height: 20px;
background: #ccc;
border-image: linear-gradient(to right, rgba(255, 64, 0, 1), rgba(255, 64, 0, 0));
border-image-slice: 1;
border-image-width: 0 0 10px 0;
}

<div class="box">
            
</div>

​

N.B.淡入淡出到透明渐变是使用rgba colors (代替hex colors)实现的。

rgba(255, 64, 0, 0) ( alpha channel为0)是与rgba(255, 64, 0, 1) ( alpha channel为1，完全不透明)完全透明的等价物。

Answer 3

您可以将渐变设置为边框颜色。但您可以使用另一个元素来完成此操作。

<style>
    div {height:20px; background: linear-gradient(#FF4000, transparent); padding-bottom: 10px;}
    div div {background: yellow; padding-bottom: 0;}
</style>
<div>
    <div></div>
</div>

http://jsfiddle.net/7et1w393/