ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで影効果を実現する方法

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

青灯夜游
青灯夜游オリジナル
2021-04-13 18:37:2323471ブラウズ

方法: 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 ビデオ チュートリアル

)

以上がCSSで影効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。