ホームページ > 記事 > ウェブフロントエンド > CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法

CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法

高洛峰オリジナル: 2017-03-13 17:59:242714ブラウズ

この記事では、CSS3のbox-shadowプロパティを中心に紹介します box-shadowプロパティは、影の水平方向や垂直方向の位置、色やサイズを設定することができる非常に強力なプロパティです。影が必要です。友達は

エフェクトのデモを参照できます:

box-shadow は、ボックスに 1 つ以上の影を追加します。 box-shadow 属性は、IE9 以降、Firefox 4、Chrome、Opera、および Safari 5.1.1 でサポートされています。

構文:
コードは次のとおりです:

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow、v-shadow が必要です。水平および垂直の影の位置。割り当ては許可されます。ぼかしオプション、ぼかし距離。オプションのスプレッド、影のサイズ。 color オプション、影の色。 inset はオプションで、外側のシャドウ (アウトセット) を内側のシャドウに変更します。

いくつかの簡単な例を見てみましょう:

<body>
 <p class="box">
  <span class="caption">A</span>
 </p>

 <p class="box">
  <span class="caption">B</span>
 </p>

 <p class="box">
  <span class="caption">C</span>
 </p>

 <p class="box">
  <span class="caption">D</span>
 </p>

 <p class="box">
  <span class="caption">E</span>
 </p>

 <p class="box">
  <span class="caption">F</span>
 </p>

 <p class="box">
  <span class="caption">G</span>
 </p>

 <p class="box">
  <span class="caption">H</span>
 </p>
</body>

まず単純にスタイルを設定します:

.box {   
 background-color: #fff;   
 border: 3px solid #ccc;   
 float: left;   
 margin: 20px 40px 0 0;   
 height: 65px;   
 width: 160px;   
 text-align: center;   
}   
.caption {   
 font-size: 20px;   
 position: relative;   
 top: 20px;   
}

次に、さまざまなパラメーターの使用方法を 1 つずつ練習しましょう。基本的に、box-shadow を使用する場合は、h-shadow と v-shadow の少なくとも 2 つのパラメーターを指定する必要があります。

.box:nth-child(1) {   
 -webkit-box-shadow: 3px 3px #f3d42e;   
 -moz-box-shadow: 3px 3px #f3d42e;   
 box-shadow: 3px 3px #f3d42e;   
}

変位距離が正の場合は、右または下にシフトします。左または下にシフトします上

CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法

にぼかし半径 5 ピクセルを加えます:

.box:nth-child(2) {   
 -webkit-box-shadow: 3px 3px 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 5px #f3d42e;   
 box-shadow: 3px 3px 5px #f3d42e;   
}

CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法

拡散距離は実際のシャドウ範囲を強化します:

.box:nth-child(3) {   
 -webkit-box-shadow: 3px 3px 0 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 0 5px #f3d42e;   
 box-shadow: 3px 3px 0 5px #f3d42e;   
}

変位距離は拡散距離に追加されます、値が負の場合、影の範囲が狭まります

CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法

拡散部分にもぼかし効果があります:

.box:nth-child(4) {   
 -webkit-box-shadow: 3px 3px 5px 5px #f3d42e;   
 -moz-box-shadow: 3px 3px 5px 5px #f3d42e;   
 box-shadow: 3px 3px 5px 5px #f3d42e;   
}

CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法

変位距離が設定されていない場合、ぼかし効果はブロック周囲の露出領域から直接:

.box:nth-child(5) {   
 -webkit-box-shadow: 0 0 15px #f3d42e;   
 -moz-box-shadow: 0 0 15px #f3d42e;   
 box-shadow: 0 0 15px #f3d42e;   
}

CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法

+ 拡散距離:

.box:nth-child(6) {   
 -webkit-box-shadow: 0 0 15px 5px #f3d42e;   
 -moz-box-shadow: 0 0 15px 5px #f3d42e;   
 box-shadow: 0 0 15px 5px #f3d42e;   
}

CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法

また、使用時に inset パラメータを追加すると、本来はブロックの外側に表示される影の効果が内側の影の効果になります:

.box:nth-child(7) {   
 -webkit-box-shadow: 3px 3px #f3d42e inset;   
 -moz-box-shadow: 3px 3px #f3d42e inset;   
 box-shadow: 3px 3px #f3d42e inset;   
}

よく気付きましたか？本来、変位距離が正の場合、右または下にシフトされますが、インセットパラメーターにより、効果が逆になります:

CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法

プラスぼかし半径と拡散距離:

.box:nth-child(8) {   
 -webkit-box-shadow: 3px 3px 5px 5px #f3d42e inset;   
 -moz-box-shadow: 3px 3px 5px 5px #f3d42e inset;   
 box-shadow: 3px 3px 5px 5px #f3d42e inset;   
}

CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法

要素に複数の影設定を追加する場合:

.box:nth-child(9) {   
 -webkit-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
 -moz-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
 box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;   
}

影の階層関係は、上位のレベルほど早く設定されます~

CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法

boxの使い方に慣れてきたら-shadow, you can さまざまな要素に、よりデザインっぽい境界線効果を追加するのは非常に簡単かつ迅速です。

以上がCSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：小型CSSを使用した場合と使用しない場合のタグの属性を分析する次の記事：小型CSSを使用した場合と使用しない場合のタグの属性を分析する

続きを見る