ホームページ > 記事 > ウェブフロントエンド > CSSで影効果を実現する方法
方法: 1. text-shadow 属性、構文「text-shadow: 水平シャドウ垂直シャドウブラー距離カラー;」を使用します。2. box-shadow 属性、構文「box-shadow:」を使用します。水平方向のシャドウ 垂直方向のシャドウ ブラー距離 シャドウ サイズ カラー インセット;"。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
方法 1: text-shadow 属性を使用する
text-shadow
属性は、シャドウ付きのテキストを設定するために使用されます。影は、影の色だけでなく、幅、ぼかし距離も設定できます。
構文:
text-shadow: h-shadow v-shadow blur color;
プロパティ値:
h-shadow: 水平方向の影の位置を設定します。負の値も許可されます。
v-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>
##方法 2: box-shadow 属性を使用する
box-shadow
このプロパティは、テキスト ボックスに影を適用することができ、影のピクセルの長さ、幅、ぼかし距離、および影の色を設定できます。構文:
box-shadow: 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で影効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。