边界渐变[重复]答案

【问题标题】：Border Gradient [duplicate]边界渐变[重复]
【发布时间】：2013-12-22 03:08:41
【问题描述】：

我正在尝试使 div 的边框在“渐变”标题下具有渐变，如 here 所示。

我已将本网站上显示的代码放入 jsfiddle here，但正如您所见，它不起作用。

.border_gradient {
    border: 8px solid #000;
    -moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    padding: 5px 5px 5px 15px;
    width: 300px;
}

谁能指出我如何完成这种渐变的正确方向？提前致谢。

【问题讨论】：

它适用于最新的 FireFox，但不适用于最新的 Chrome 或 IE 10。
这可能会有所帮助：stackoverflow.com/a/6441510/1090389
您使用 -moz- 前缀的属性。这些仅适用于 Firefox。

标签： html css

【解决方案1】：

正如 codehorse 所建议的，使用 box shadow inset 可以完成我正在寻找的内容，并且代码少得多。谢谢大家！

【讨论】：

【解决方案2】：

这个css声明只能在mozilla浏览器下工作

.border_gradient {
    border: 8px solid #000;
    -moz-border-bottom-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-top-colors:    #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-left-colors:   #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
    -moz-border-right-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
}

【讨论】：