3

純粋なCSSを使用して、垂直の線形グラデーションである境界線を作成するにはどうすればよいですか？

-moz-linear-gradient画像ファイルではなく使用したい。このプロジェクトでサポートする必要があるブラウザはFirefoxだけです。

境界線の太さを10ピクセル、角の半径を20ピクセルにします。また、境界線を線形グラデーションにし、上部がオレンジ色（下に表示）で、下部が灰色にフェードするようにします。

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

良い答えを見ずに他の質問を確認しました（この記事とそこにあるこの参照のように）。マークアップにこの効果を達成するために必要なdivレイヤーが含まれている場合でも、画像なしでHTML/CSSを使用する答えを受け入れます。ありがとう！

4

3 に答える 3

2

私はこれがあなたのためのトリックをするべきだと信じています。backgroundプロパティをgradientに設定する必要があります。

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

編集：私は質問を間違って読みました、私はあなたがグラデーションの背景が欲しいかのようにあなたの質問に答えました。以下のBrianHoughのソリューションは、境界線を上から下に直線的に直線的に変化させる場合に適しています。すべての側面に外側/内側のグラデーションが必要な場合は、次のようなことを行います。

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

編集：ディランヘイズの追加ソリューションに便乗する。同じことを達成するために放射状グラデーションを使用することもできます。ここでも、要素のサイズに基づいて微調整する必要があります。

#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 に答える