html – 我们可以将渐变颜色设置为border-bottom属性吗？

概述参见英文答案 > CSS3 Gradient Borders                                    14个 我们可以为html块元素的border-bottom属性添加渐变颜色吗？ 边界应该类似于此 – 任何人都可以告诉我在CSS3中有可能吗？ 我试过这样,但无法让它发挥作用. .border-gradient { border-bottom: 8px so 参见英文答案 > CSS3 Gradient Borders14个
我们可以为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,30,1) 100%);   -webkit-border-image:  -webkit-gradIEnt(left top,right top,color-stop(0%,1)),color-stop(12%,color-stop(47%,color-stop(100%,1)));   -webkit-border-image:  -webkit-linear-gradIEnt(left,1) 100%);   -o-border-image: -o-linear-gradIEnt(left,1) 100%); border-image: linear-gradIEnt(to right,1) 100%);}

解决方法 既然答案已经给出,请将此视为信息.

您可以使用background-image而不是border-image在底部绘制渐变.

渐变可以是旧浏览器的图像和年轻浏览器的渐变.

边框图像中使用的渐变尚未完全支持,firefox似乎仍然不喜欢它.

使用背景填充就像边框站在那里一样. DEMO

div {  text-align:center;  padding-bottom:5px;  background: /* gradIEnt can be an image */    linear-gradIEnt(      to left,1) 100%    )    left     bottom    #777        no-repeat;   background-size:100% 5px ;/* if linear-gradIEnt,we need to resize it */}

注意,不需要伪元素,你也可以用这种方式绘制每个边界甚至animate them.

总结

以上是内存溢出为你收集整理的html – 我们可以将渐变颜色设置为border-bottom属性吗？全部内容，希望文章能够帮你解决html – 我们可以将渐变颜色设置为border-bottom属性吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。