我们可以为html块元素的border-bottom
属性添加渐变颜色吗?
边界应该与此类似 -
有人能告诉我CSS3有可能吗?
我试过这样,但无法让它发挥作用。
.border-gradient {
border-bottom: 8px solid;
-moz-border-image: -moz-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
-webkit-border-image: -webkit-gradient(left top, right top, color-stop(0%, rgba(92,7,52,1)), color-stop(12%, rgba(134,29,84,1)), color-stop(47%, rgba(255,93,177,1)), color-stop(100%, rgba(83,0,30,1)));
-webkit-border-image: -webkit-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
-o-border-image: -o-linear-gradient(left, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%); border-image: linear-gradient(to right, rgba(92,7,52,1) 0%, rgba(134,29,84,1) 12%, rgba(255,93,177,1) 47%, rgba(83,0,30,1) 100%);
}
答案 0 :(得分:17)
由于已经给出了答案,请将此视为信息。
您可以使用background-image
代替border-image
在底部绘制渐变。
渐变可以是较旧浏览器的图像,也可以是较年轻浏览器的渐变。
border-image中使用的渐变尚未完全支持,Firefox似乎仍然不喜欢它。
使用背景+填充就像边框站在那里一样。的 DEMO 强>
div {
text-align:center;
padding-bottom:5px;
background: /* gradient can be an image */
linear-gradient(
to left,
rgba(92,7,52,1) 0%,
rgba(134,29,84,1) 12%,
rgba(255,93,177,1) 47%,
rgba(83,0,30,1) 100%
)
left
bottom
#777
no-repeat;
background-size:100% 5px ;/* if linear-gradient, we need to resize it */
}
注意,不需要伪元素,您也可以通过这种方式绘制每个边框,甚至 animate them 。
答案 1 :(得分:5)
我们在这里:)
有一个小提琴 - Fiddle link!
我只留下了webkit渐变,因此这适用于Chrome。适当改变:))
HTML
<div>aaa</div>
CSS
div {
display: block;
height: 200px;
width: 500px;
border: solid 1px #CCC;
border-bottom: none;
position: relative;
}
div:after {
content:"";
background: -webkit-linear-gradient(left, rgba(92, 7, 52, 1) 0%, rgba(134, 29, 84, 1) 12%, rgba(255, 93, 177, 1) 47%, rgba(83, 0, 30, 1) 100%);
display: block;
height:10px;
width: 500px;
position: absolute;
bottom: 0;
}
答案 2 :(得分:1)
我们可以使用CSS选择器:after或:选择器之前
HTML
<section class="seperated">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</section>
<section class="seperated">Donec sapien sapien, suscipit nec accumsan ac, ornare vel enim.</section>
<section class="seperated">Nulla commodo eros nec lacus cursus mattis.</section>
CSS
section.seperated + section.seperated:before{
content:"";
height:1px;
background:-moz-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
background:-webkit-linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
background:linear-gradient(left, #FFFFFF 0%,#000000 50%,#FFFFFF 100%);
width:100%;
display:block;
}
答案 3 :(得分:1)
<div id="c">aaaaaaaa</div>
<div id="id"></div>
#c {
height:100px;
border:1px solid black;
}
#id {
border: 0;
height: 10px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);
/* IE6-9 */
}