Question

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

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

我希望边框厚度为10px，圆角半径为20px。我还希望边框是一个线性渐变，顶部是橙色（如下所示），底部是灰色。

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

我在没有看到好答案的情况下审核了其他问题（例如this文章和this ref。）我会接受使用HTML / CSS而不使用图片的答案，即使标记包含div层是实现这种效果所必需的。谢谢！

Answer 1

我相信这应该适合你。您必须将background属性设置为渐变。

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

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

Answer 3

也可以使用HTML5完成。在HTML5中，您可以制作一个画布并使用JS绘制它 - ＆gt;梯度也是。
教程找到here。

纯CSS线性渐变边框

3 个答案: