純CSS線性漸變邊框

如何使用純CSS創建一個垂直線性漸變的邊框？純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層達到這個效果。謝謝！

來源

2012-03-15 f8loot

如果你想讓邊界變成梯度，你需要僞裝它。很明顯，您需要調整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; 
      }

來源

2012-03-15 05:18:20

我相信這應該對你有用。您必須將背景屬性設置爲漸變。

#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-15 01:49:49

這不完全是我想要的結果，但它似乎是一個很酷的效果，可能會在稍後有用。 – f8loot 2012-03-23 00:25:19

它也可以用HTML5完成。在HTML5中，您可以製作一個畫布並使用JS - >漸變進行繪製。
教程發現here。

來源

2012-03-15 14:07:50 11684

純CSS線性漸變邊框

回答

相關問題