CSS シャドウ効果の比較: ドロップシャドウとボックスシャドウ

Drop-shadow と box-shadow はどちらも影効果（ハロー効果）のための CSS プロパティです。両者の最大の違いは、box-shadow は長方形の影しか作成できないのに対し、drop-shadow はオブジェクトの不透明領域とまったく同じ形状の影を作成できることです。 2 つの CSS プロパティの使用方法は次のとおりです。

.ドロップシャドウ {
    -webkit-filter: ドロップシャドウ(12px 12px 7px rgba(0, 0, 0, 0.7));
    フィルター: ドロップシャドウ(12px 12px 7px rgba(0, 0, 0, 0.7))
}

.box-shadow {
    ボックスの影: 12px 12px 7px rgba(0, 0, 0, 0.7);
}

どちらも影効果（ハロー効果）なので、設定できるパラメータ（値）はほぼ同じです。上記の例で言うと、すべてのパラメータ値は左から右に、水平オフセット、垂直オフセット、影のぼかし距離、影の色を表しています。

次に、ドロップシャドウとボックスシャドウをさらに比較します。

境界線と変形効果

ドロップシャドウとボックスシャドウの影はどちらも、境界線の丸い角と変形効果を反映できます。違いは次のとおりです。ドロップシャドウは実際の境界線の形状を反映し、実線フレームには実線の影が、点線フレームには点線の影が付きます。ボックスシャドウは境界線と内部のコンテンツを完全な正方形として扱い、正方形全体の影を作成しますが、境界線のスタイルは無視され、直接実線フレームとして扱われます。

。箱 {
    境界線: 5px 実線 #262b57;
    幅: 120ピクセル;
    高さ: 120px;
    境界線の半径: 10px;
    変換: 回転(15度);
    フォントサイズ: 40px;
    テキスト配置: 中央;
    行の高さ: 120px;
}

.破線{
    境界線スタイル: 破線;
}

背景と透明性

ボックスに設定された色（透明ではない）がある場合、ドロップシャドウとボックスシャドウの影の効果は似たものになります。ブロックの背景が半透明の場合はどうなりますか?画像から、影の周りの色は暗く、中央の色は明るいことがわかります。そのため、透明度はドロップシャドウには影響しますが、ボックスシャドウには影響しないことが推測できます。

.bk {
    背景色: #ffcc66;
}

.bk-アルファ{
    背景色: rgba(255, 204, 102, 0.3);
}

画像の枠

この例から、drop-shadow は image-border の不規則な形状を反映できるのに対し、box-shadow は border を直接実線フレームとして扱い、border image の形状を無視することがわかります。写真のフクロウは透明な PNG ファイルです。ドロップシャドウは、境界線の画像の形状だけでなく、境界線内のフクロウの形状も反映します。ボックスシャドウは一貫した原則に従い、境界線と写真を完全な正方形として扱います。

。フレーム {
    幅: 286ピクセル;
    高さ: 240px;
    -moz-border-image: url(frame_green_.png) 25 25 繰り返し;
    -webkit-border-image: url(frame_green_.png) 25 25 繰り返し;
    境界線の幅: 25px;
    境界線画像: url(frame_green_.png) 25 25 繰り返し;
    境界線の色: #79b218;
    境界線スタイル: インセット;
    境界線の幅: 25px;
    ボックスのサイズ: 境界線ボックス;
    表示: ブロック;
    マージン: 10px;
}

擬似要素

疑似要素のドロップシャドウは疑似要素の形状を反映できますが、ボックスシャドウは疑似要素を無視します。

。追加 {
    幅: 100ピクセル;
    高さ: 100px;
    背景色: #ffcc66;
    マージン: 10px 60px;
    位置: 相対的;
    表示: インラインブロック;
}

.addition:before {
    幅: 50px;
    高さ: 50px;
    背景色: #ff8833;
    コンテンツ： '';
    表示: ブロック;
    位置: 絶対;
    左: 0;
    上位: 50%;
    左マージン: -40px;
    変換: 回転(45度);
    上マージン: -10px;
}

.追加:後{
    幅: 60ピクセル;
    高さ: 60px;
    背景色: #ff8833;
    マージン: 10px;
    コンテンツ： '';
    表示: ブロック;
    変換: 回転(20度);
    変換: skew(20deg, 20deg);
    上: 5px;
    右: -40px;
    位置: 絶対;
}

ブロック内の小さなブロック

ドロップシャドウの影はブロック内のすべての要素の形状を反映できますが、ボックスシャドウはブロックの長方形の影を直接反映します。

。四角 {
    幅: 50px;
    高さ: 50px;
    表示: インラインブロック;
    背景色: #ffcc66;
    マージン: 20px;
}
。丸 {
    幅: 50px;
    高さ: 50px;
    表示: インラインブロック;
    境界線の半径: 50%;
    背景色: #ff8833;
    マージン: 20px;
}

<div class="demo-wrap">
    <div class="drop-shadow">
        <span class="square"></span>
        <span class="circle"></span>
        <p>ドロップシャドウ</p>
    </div>
    <div class="box-shadow">
        <span class="square"></span>
        <span class="circle"></span>
        <p>ボックスシャドウ</p>
    </div>
</div>

ドロップシャドウとボックスシャドウの違い

ドロップシャドウには、内部境界 (インセットシャドウ) と距離 (スプレッド) の特性はありません。サポートに関しては、IE は現在 drop-shadow プロパティをサポートしていませんが、すべてのブラウザは一般に box-shadow をサポートしています。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: Docker-compose はブリッジを作成し、サブネットを追加し、ネットワークカードを削除します。

>>: IE アドレスバーのアイコン表示問題を解決する 3 つの手順