ホームページ > 記事 > ウェブフロントエンド > CSS3のbox-shadowプロパティを使用して境界線の影効果を作成する方法
この記事では、CSS3のbox-shadowプロパティを中心に紹介します box-shadowプロパティは、影の水平方向や垂直方向の位置、色やサイズを設定することができる非常に強力なプロパティです。影が必要です。友達は
エフェクトのデモを参照できます:構文:
コードは次のとおりです:
box-shadow: h-shadow v-shadow blur spread 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; }
.box:nth-child(2) { -webkit-box-shadow: 3px 3px 5px #f3d42e; -moz-box-shadow: 3px 3px 5px #f3d42e; box-shadow: 3px 3px 5px #f3d42e; }拡散距離は実際のシャドウ範囲を強化します:
.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; }変位距離は拡散距離に追加されます、値が負の場合、影の範囲が狭まります
.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; }
.box:nth-child(5) { -webkit-box-shadow: 0 0 15px #f3d42e; -moz-box-shadow: 0 0 15px #f3d42e; box-shadow: 0 0 15px #f3d42e; }
.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; }
.box:nth-child(7) { -webkit-box-shadow: 3px 3px #f3d42e inset; -moz-box-shadow: 3px 3px #f3d42e inset; box-shadow: 3px 3px #f3d42e inset; }
.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; }
要素に複数の影設定を追加する場合:
.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プロパティを使用して境界線の影効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。