纯CSS线性渐变边框
使用纯CSS，我该如何创建一个垂直线性渐变的边框？
我想使用-moz-linear-gradient而不是图像文件。 我需要为这个项目支持的唯一浏览器是Firefox。
我希望边框的厚度为10px，边角半径为20px。 我还希望边框是一个线性渐变，橙色（如下所示）在顶部渐变为灰色。
#box {
border: 10px #808080 solid;
-moz-border-radius: 20px;
/* -moz-linear-gradient: ??? #F58154 #CCCCCC ???; */
}
我已经回顾了其他问题，但没有看到一个好的答案（就像本文和这里的ref）。我会接受一个使用HTML / CSS而没有图像的答案，即使标记包含实现此效果所需的div图层。 谢谢！
如果您试图将边框设为渐变，则需要将其伪造。 很明显，您需要调整div大小以及放入其中的内容类型。 但是，这应该给你的主意。
HTML
<div id="outer-box">
<div id="inner-box">
<p>Some Text</p>
</div>
</div>
CSS
#outer-box {
padding: 10px;
-moz-border-radius: 20px;
background: -moz-linear-gradient(top, #f58154, #CCC);
}
#inner-box {
-moz-border-radius: 20px;
background: #fff;
}
编辑：捎带迪伦海耶斯额外的解决方案。 你也可以使用径向渐变来完成同样的事情。 再次需要根据元素的大小进行调整。
#outer-box {
padding: 10px;
height: 200px;
width: 200px;
-moz-border-radius: 20px;
background: -moz-radial-gradient(#CCC, #f58154);
}
#inner-box {
height: 200px;
width: 200px;
-moz-border-radius: 20px;
background: #fff;
}
我相信这应该对你有用。 您必须将背景属性设置为渐变。
#box {
border: 10px #808080 solid;
-moz-border-radius: 20px;
background: -moz-linear-gradient(top, #f58154, #CCC);
}
编辑：我读错了问题，我回答你的问题，如果你想要一个渐变背景。 下面的Brian Hough的解决方案是很好的，如果你想在你的边界从上到下直线渐变。 如果你想在所有方面想要一个外部/内部渐变，你会想做类似的事情
#box {
border: 10px solid black;
-moz-border-radius: 20px;
/* Gradient on all sides*/
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
background: black;
height: 200px;
width: 200px;
}
它也可以用HTML5完成。 在HTML5中，您可以制作一个画布并使用JS - >渐变进行绘制。
教程在这里找到。