纯 CSS 线性渐变边框答案

【问题标题】：pure CSS linear gradient border纯 CSS 线性渐变边框
【发布时间】：2012-03-15 01:41:48
【问题描述】：

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

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

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

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

我已经查看了其他问题，但没有找到好的答案（例如 this 文章和 this 参考文献。）我会接受使用 HTML/CSS 而没有图像的答案，即使标记包含必要的 div 层达到这个效果。谢谢！

【问题讨论】：

标签： html css firefox border linear-gradients

【解决方案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;
}

【讨论】：

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

【解决方案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;
          }

【讨论】：

【解决方案3】：

HTML5 也可以。在 HTML5 中，您可以制作一个画布并使用 JS --> 渐变在其上绘制。
教程找到here。

【讨论】：