css3で実装されているシャドウ属性とは何ですか？-フロントエンドQ&A-php.cn

css3で実装されているシャドウ属性とは何ですか？

青灯夜游

リリース： 2022-02-25 18:20:46

オリジナル

13900 人が閲覧しました

css3 で実装されるシャドウ属性には、1. テキストのシャドウ効果を実現できる text-shadow 属性、2. 境界線のシャドウ効果を実現できる box-shadow 属性、3. filter 属性、 Drop-shadow() 関数と組み合わせて使用すると、画像に影の効果を設定できます。

css3で実装されているシャドウ属性とは何ですか？

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 はシャドウ属性を実装します

1. text-shadow 属性---テキストのシャドウ効果を実装します

text-shadow プロパティは、影付きのテキストを設定するために使用されます。影のピクセルの長さ、幅、ぼかし距離、および影の色を設定できます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

ログイン後にコピー

css3で実装されているシャドウ属性とは何ですか？

2. box-shadow 属性 -- 境界線のシャドウ効果を実現します

box-shadow 属性はテキストにシャドウを適用できます。ボックスでは、影のピクセルの長さ、幅、ぼかし距離、および影の色を設定できます。

box-shadow は要素に影を追加でき、1 つ以上の追加をサポートします。

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

ログイン後にコピー

パラメータ:

css3で実装されているシャドウ属性とは何ですか？

注: inset は最初または最後のパラメータに記述できます。他の位置は無効です。

影のぼかし半径:

このパラメータはオプションです。値は正のみです。値が 0 の場合、影にはぼかし効果がないことを意味します。値が大きいほど、影のエッジが小さくなります。

css コード:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px #666;
 }

ログイン後にコピー

効果:

css3で実装されているシャドウ属性とは何ですか？

影の拡張半径:

Thisパラメータはオプションで、値は正または負の値を指定できます。値が正の場合は影全体が拡大して拡大され、そうでない場合は値が負の場合は縮小されます。

css コード:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:4px 4px 15px -3px #666;
}

ログイン後にコピー

効果:

css3で実装されているシャドウ属性とは何ですか？

X 軸オフセットとY 軸のオフセット値は負の数に設定できます

X 軸のオフセットは負の数です:

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:-5px 5px 5px #666;
}

ログイン後にコピー

効果:

css3で実装されているシャドウ属性とは何ですか？

Y 軸オフセットが負です:

#box{
    width:50px;
    height:50px;
    background:#fff;
    box-shadow:5px -5px 5px #666;
}

ログイン後にコピー

効果:

css3で実装されているシャドウ属性とは何ですか？

##外側の影:

#box{
     width:50px;
     height:50px;
     background:green;
     box-shadow:5px 4px 10px #666;
}

ログイン後にコピー

効果:

インナーシャドウ:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset;
}

ログイン後にコピー

エフェクト:

#複数のシャドウを追加:

#box{
     width:50px;
     height:50px;
     background:#fff;
     box-shadow:5px 4px 10px #666 inset,
                3px 3px 5px pink,
                6px 4px 2px green;
}

ログイン後にコピー

Effect:

css3で実装されているシャドウ属性とは何ですか？

3. filter 属性

filter 属性は要素 (通常は css3で実装されているシャドウ属性とは何ですか？

) を定義します。視覚効果は、drop-shadow() 関数とともに使用すると、画像に影の効果を設定できます。

filter:drop-shadow(h-shadow v-shadow blur spread color);

ログイン後にコピー

シャドウはマスクのオフセットバージョンであり、画像の下に合成され、ぼかしを加えたり、特定の色でペイントしたりできます。この関数は、「inset」キーワードが許可されていないことを除き、タイプ (CSS3 コンテキストで定義) の値を受け入れます。この関数は既存の box-shadow box-shadow プロパティに非常に似ていますが、異なる点は、一部のブラウザでは、フィルタを通じてパフォーマンスを向上させるハードウェアアクセラレーションが提供されることです。パラメータは次のとおりです:

h-shadow v-shadow (必須)
これらは設定する 2 つのパラメータです。影のオフセット値。水平方向の距離を設定します。負の値を指定すると、要素の左側に影が表示されます。垂直方向の距離を設定します。負の値値を指定すると、要素の上に影が表示されます。に使用できる単位を表示します。
両方の値が 0 の場合、影は要素のすぐ後ろに表示されます ( および/または < ;spread の場合) -radius>、ぼかし効果があります)。
(オプション)
これは 3 番目のコードです> ; 値。値が大きいほどぼやけ、影は大きく明るくなります。負の値は使用できません。設定しない場合、デフォルトは 0 (影の境界が非常に大きくなります) Sharp).
(オプション)
これは 4 番目の値です。正の値影が拡大および変化します。大きな負の値は影を縮小します。設定されていない場合、デフォルトは 0 (影は要素と同じサイズになります)。
注: Webkit および他の一部のブラウザは、3 番目の 4 つの長さをサポートしていません。追加しても、4 つの長さはレンダリングされません。
<色> (オプション)
查看该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>

<p>给图像设置一个阴影效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

</body>
</html>

ログイン後にコピー

css3で実装されているシャドウ属性とは何ですか？