CSSシャドウ効果：CSSボーダーシャドウを設定するにはどうすればよいですか？-CSSチュートリアル-php.cn

CSSシャドウ効果：CSSボーダーシャドウを設定するにはどうすればよいですか？

不言

リリース： 2018-09-05 17:20:06

オリジナル

10477 人が閲覧しました

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>

ログイン後にコピー

効果は次のとおりです:

CSSシャドウ効果：CSSボーダーシャドウを設定するにはどうすればよいですか？

フレームに影効果を追加すると、より立体的でより美しくなります(色はきれいではないかもしれませんが、より見栄えの良い組み合わせを選択できます) ...^@^ )

説明: 上記のコードでは、box-shadow の後ろに 4 つの属性値があることがわかります。これは何を意味しますか?

box-shadow 属性値の意味を見てみましょう。 (推奨: CSS border プロパティの例)

box-shadow は、ボックスに 1 つ以上の影を追加します。

この属性は影のカンマ区切りリストであり、各影は 2 ～ 4 個の長さの値、オプションの色の値、およびオプションの inset キーワードによって指定されます。省略された長さの値は 0 です。

値	は、
h-shadow	を意味します。水平方向の影の位置。負の値も許可されます。
v-shadow	必須。垂直影の位置。負の値も許可されます。
ぼかし	オプション。曖昧な距離。
スプレッド	オプション。影のサイズ。
カラー	オプション。影の色。
インセット	オプション。外側の影（アウトセット）を内側の影に変更します。