html - 边框渐变

<分区>

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

enter image description 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;
}

任何人都可以为我指出如何完成这种渐变的正确方向吗？提前致谢。

最佳答案

正如 codehorse 所建议的那样，使用 box shadow inset 可以完成我正在寻找的东西，而且代码要少得多。谢谢大家!

关于html - 边框渐变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20725853/

上一篇：html - 我可以使用直接 HTML/CSS 网站的模板部分吗？

下一篇：html - Bootstrap 行类取消了移动 View 中的适当侧边距

相关文章：

javascript - 查找类的下一个实例(jquery)

javascript - 网格结构中的元素，元素之间有箭头

javascript - Firefox bug - 选项在悬停时消失

javascript - HTML和CSS img是相连的怎么分开？

CSS 网格高亮显示

html - 如何调整文本宽度并将其放在帖子(视觉)编辑器的中心？

html - 如何在 HTML 中将多个图像居中放置在页面的中心？

html - 默认情况下 Bootstrap 辅助导航栏不折叠

html - 如何修复 Bootstrap 不透明度？

javascript - background-position-x + 动画从右到左 + IE