Question

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

$('<div class="content"><div class="subcontent">Third</div></div>').insertBefore('#wrapper .content:last');

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

Answer 1

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

如果您定位较旧的浏览器，也可能必须使用浏览器前缀。

同时检查Demo。

＆＃13;

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);
}

＆＃13;

<div>Hi</div>

＆＃13;

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/

Answer 4

试试这样：

 .myClass {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,172)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,172) 50%, rgb(0,255,255) 67% );
padding: 10px;
}

.myClass > div { background: #fff; }

<强> JSFIDDLE DEMO

Answer 5

-webkit-linear-gradient(to right, #3acfd5 0%, #3a8ed5 100%)

＆＃13;

div {
  -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
  height: 20px;
  width: auto;
  background: #ccc;
}

＆＃13;

<div></div>

＆＃13;

CSS设置边框渐变颜色

5 个答案: