纯 CSS 线性渐变边框

Question

使用纯CSS，我应该如何创建一个垂直的、线性渐变的边框？

我想要使用-moz-linear-gradient而不是图片文件。这个项目只需要支持Firefox浏览器。

我希望边框厚度为10px，圆角半径为20px。我还希望边框呈现线性渐变，从上方的橙色（如下所示）向底部淡化为灰色。

#box {
    border: 10px #808080 solid;
    -moz-border-radius: 20px;
    /* -moz-linear-gradient: ??? #F58154 #CCCCCC ???; */
}

我查看了其他问题，没有看到一个好的答案（例如这篇文章和这个参考文献）。即使标记包含必要的div层来实现此效果，我也会接受使用HTML/CSS而不使用图像的答案。谢谢！

- f8loot

Answer 1

我相信这个可以帮到你。 您需要将背景属性设置为渐变。

#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;
}

- Dylan Hayes

---

这不是我想要的结果，但它似乎是一个很酷的效果，以后可能会有用。 - f8loot

Answer 2

如果你想将边框设为渐变，那么你需要模拟它。显然你需要根据 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;
        } 

编辑：为了借鉴Dylan Hayes的额外解决方案，您还可以使用径向渐变来实现相同的效果。同样需要根据元素的大小进行调整。

#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;
          } 

- Brian Hough

Answer 3

这也可以用HTML5完成。在HTML5中，您可以使用JS绘制画布-->渐变。
教程在这里找到。

- 11684