ホームページ > 記事 > ウェブフロントエンド > CSSシャドウ効果：CSSボーダーシャドウを設定するにはどうすればよいですか？
CSSシャドウ効果：CSSボーダーシャドウを設定するにはどうすればよいですか？
- 不言オリジナル
- 2018-09-05 17:20:0610454ブラウズ
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 サイトの他の関連記事を参照してください。