ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSシャドウ効果:CSSボーダーシャドウを設定するにはどうすればよいですか?
Web デザインの過程では、デザインされた Web ページをより美しく見せるために、Web ページに特殊効果を設定する必要があることがよくあります。この記事では、CSS を使用して境界線に影の効果を設定する方法を紹介します。影効果を使用すると、フレームがより立体的にデザインされます。それでは、CSS の境界線の影効果を設定する方法を詳しく見てみましょう。
境界線の影を設定する場合、必須の属性は box-shadow で、ボックスに 1 つ以上の影を追加できます。以下に具体的な例を見てみましょう。
<!DOCTYPE html> <html> <head> <style> body{margin:30px;background-color:#E9E9E9;} div.polaroid{width:294px;padding:10px 10px 20px 10px;border:1px solid #BFBFBF;background-color:green; /* 设置阴影效果 */ box-shadow:5px 5px 6px #090;} div.rotate_left {float:left; -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ transform:rotate(7deg);} } </style> </head> <body> <div class="polaroid rotate_left"> <img src="/i/ballade_dream.jpg" alt="郁金香" width="284" style="max-width:90%" /> <p class="caption">鲜花郁金香,花名:Ballade Dream。</p> </div> </body> </html>
効果は次のとおりです:
フレームに影効果を追加すると、より立体的でより美しくなります(色はきれいではないかもしれませんが、より見栄えの良い組み合わせを選択できます) ...^@^ )
説明: 上記のコードでは、box-shadow の後ろに 4 つの属性値があることがわかります。これは何を意味しますか?
box-shadow 属性値の意味を見てみましょう。 (推奨: CSS border プロパティの例)
box-shadow は、ボックスに 1 つ以上の影を追加します。
この属性は影のカンマ区切りリストであり、各影は 2 ~ 4 個の長さの値、オプションの色の値、およびオプションの inset キーワードによって指定されます。省略された長さの値は 0 です。
値 |
は、 |
h-shadow |
を意味します。水平方向の影の位置。負の値も許可されます。 |
v-shadow |
必須。垂直影の位置。負の値も許可されます。 |
ぼかし |
オプション。曖昧な距離。 |
スプレッド |
オプション。影のサイズ。 |
カラー | オプション。影の色。 |
インセット |
オプション。外側の影(アウトセット)を内側の影に変更します。 |
各属性値の意味を確認すると、上記の例で設定されたシャドウ効果がわかります。box-shadow 属性の後の 4 つの属性値は、h-shadow、v-shadow です。 、ぼかし、色。
CSS で実現できる見栄えの良い効果がたくさんあります。CSS の影効果について詳しく知りたい場合は、PHP 中国語 Web サイトのCSS3 最新バージョン リファレンス マニュアルを参照してください
CSS3 最新バージョン リファレンスマニュアル
関連する推奨事項:
CSS3 入力ボックスの影効果とその他の影効果_html/css_WEB-ITnose
css 影テキスト効果を実現するためにshadow_html/css_WEB-ITnose
以上がCSSシャドウ効果:CSSボーダーシャドウを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。