CSSで影効果を実現する方法-CSSチュートリアル-php.cn

CSSで影効果を実現する方法

青灯夜游

リリース： 2023-01-05 16:08:19

オリジナル

23503 人が閲覧しました

方法: 1. text-shadow 属性、構文「text-shadow: 水平シャドウ垂直シャドウブラー距離カラー;」を使用します。2. box-shadow 属性、構文「box-shadow:」を使用します。水平方向のシャドウ垂直方向のシャドウブラー距離シャドウサイズカラーインセット;"。

CSSで影効果を実現する方法

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

方法 1: text-shadow 属性を使用する

text-shadow 属性は、シャドウ付きのテキストを設定するために使用されます。影は、影の色だけでなく、幅、ぼかし距離も設定できます。

構文:

text-shadow: h-shadow v-shadow blur color;

ログイン後にコピー

プロパティ値:

h-shadow: 水平方向の影の位置を設定します。負の値も許可されます。
v-shadow: 垂直シャドウの位置を設定します。負の値も許可されます。
#blur: ぼかしの距離を設定します。
color: 影の色を設定します。

<!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>

ログイン後にコピー

CSSで影効果を実現する方法 ##方法 2: box-shadow 属性を使用する

box-shadow

このプロパティは、テキストボックスに影を適用することができ、影のピクセルの長さ、幅、ぼかし距離、および影の色を設定できます。

構文:

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

ログイン後にコピー

属性値:

h-shadow: 水平方向の影の位置を設定します。負の値は許可されます; 必須の値、省略できません。

v-shadow: 垂直影の位置を設定します。負の値は許可されます。必須の値です。省略することはできません。
blur: ぼかし距離を設定します。オプションの値は省略可能です。
spread: 影のサイズを設定します。オプションの値は省略可能です。
color: 影の色を設定します。オプションの値は省略可能です。
inset: 内側のシャドウを外側のシャドウ (先頭) から変更するように設定します。オプションの値は省略可能です。
例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置阴影效果</title>
        <style>
            .demo{
                width: 400px;
                height: 300px;
                margin: 50px auto;
            }
            .demo img{
                 box-shadow: 10px 10px 10px rgba(0,0,0,.5);
                 /*考虑浏览器兼容性*/
                 -moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
                 -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <img  src="img/1.jpg"/ alt="CSSで影効果を実現する方法" >
        </div>
    </body>
</html>

ログイン後にコピー

(学習ビデオ共有: CSSで影効果を実現する方法 css ビデオチュートリアル