ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで影効果を実現する方法
CSSで影効果を実現する方法
- 青灯夜游オリジナル
- 2021-04-13 18:37:2323650ブラウズ
方法: 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: 垂直シャドウの位置を設定します。負の値も許可されます。
- #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>
##方法 2: box-shadow 属性を使用する
box-shadow
このプロパティは、テキスト ボックスに影を適用することができ、影のピクセルの長さ、幅、ぼかし距離、および影の色を設定できます。構文:
box-shadow: h-shadow v-shadow blur spread color inset;属性値:
- 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="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" / alt="CSSで影効果を実現する方法" >
</div>
</body>
</html>
(学習ビデオ共有: 
css ビデオ チュートリアル
以上がCSSで影効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSでテーブルの間隔を設定する方法次の記事：CSSでテーブルの間隔を設定する方法