ホームページ > ウェブフロントエンド > CSSチュートリアル > box-shadow 属性の機能は何ですか

box-shadow 属性の機能は何ですか

青灯夜游
リリース: 2019-01-30 13:31:46
オリジナル
7614 人が閲覧しました

box-shadow は CSS3 のプロパティで、ボックスに 1 つ以上の影を追加し、影の位置、サイズ、色などを設定するために使用されます。

box-shadow 属性の機能は何ですか

#CSS3 box-shadow プロパティ

関数: box-shadow はボックスに影を追加するには使用します。

基本構文:

box-shadow: h-shadow v-shadow blur spread color inset;
ログイン後にコピー

パラメータ:

h-shadow: 位置水平方向の影の 。負の値も許可されます。

v-shadow: 垂直方向の影の位置。負の値も許可されます。

blur: ぼかし距離、省略可能。

spread: 影のサイズは省略可能です。

color: 影の色は省略可能です。

inset: 外側のシャドウ (アウトセット) を内側のシャドウに変更します。これは省略可能です。

説明: box-shadow は、ボックスに 1 つ以上の影を追加します。このプロパティは、影のコンマ区切りのリストで、それぞれ 2 ~ 4 の長さの値、オプションの色の値、およびオプションの inset キーワードで指定されます。省略された長さの値は 0 です。

css3 box-shadow 属性の使用例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
margin: 100px auto;
}
</style>
</head>
<body>

<div></div>

</body>
</html>
ログイン後にコピー

レンダリング:


box-shadow 属性の機能は何ですか

以上がこの記事の全内容ですが、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ! !

以上がbox-shadow 属性の機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート