CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法-CSSチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-13 17:59:24

オリジナル

2768 人が閲覧しました

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

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

CSS3の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プロパティを使用して境界線の影効果を作成する方法