3

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

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

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

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

我已经查看了其他问题，但没有看到一个好的答案（比如这里的这篇文章和这个参考文献。）我会接受一个使用 HTML/CSS 没有图像的答案，即使标记包含实现此效果所需的 div 层。谢谢！

4

3 回答 3

2

我相信这应该对你有用。您必须将背景属性设置为渐变。

#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;
}
于 2012-03-15T01:49:49.523 回答
1

如果您试图使边界成为渐变，则需要伪造它。显然，您需要调整 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;
          }
于 2012-03-15T05:18:20.003 回答
0

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

于 2012-03-15T14:07:50.430 回答