純粋なCSSリニアグラデーションボーダー

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そこインチ）私は、マークアップをするために必要なのdivレイヤが含まれている場合でも、画像なしでHTML/CSSを使用して答えを受け入れますこの効果を達成する。ありがとう！

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

EDIT：ディラン・ヘイズの追加ソリューションのピギーバックに。ラジアルグラデーションを使って同じことを達成することもできます。また、要素のサイズに基づいて調整する必要があります。

#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 2

私はこれがあなたのトリックを行うべきだと思います。 背景プロパティをグラデーションに設定する必要があります。

#box { 
    border: 10px #808080 solid; 
    -moz-border-radius: 20px; 
    background: -moz-linear-gradient(top, #f58154, #CCC); 
} 

EDIT： は、私はあなたがグラデーション背景を望んでいたかのように私はあなたの質問に答え、質問が間違って読んでください。 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 3

HTML5でも実行できます。 HTML5ではキャンバスを作ってJS - > gradientで描画することができます。
チュートリアルはhereです。