CSS3 の box-shadow 属性の使用法の詳細な説明:
まず理解するために、Box-shadow は 2 つの部分に分解できます:
(1).box: いわゆるボックスを表します。 div などの要素。
(2).shadow: 投影の意味。
次に、この属性は要素の影効果を設定するために使用されます。
この章では、コード例を通じて box-shadow 属性の使用法を紹介します。
構文構造は次のとおりです:
box-shadow:h-shadow v-shadow blur spread color inset;
パラメータの説明:
1.h-shadow: 必須、要素の影の水平オフセットを設定します。負の値にすることができ、単位はピクセルです。
2.v-shadow: 必須。要素のシャドウの垂直オフセットを設定します。これは負の値にすることができ、単位はピクセルです。
3.blur: オプション。影のぼかし半径は正の値のみにすることができます。0 の場合は、ぼかし効果がないことを意味し、単位はピクセルです。
4.spread: オプション。影の拡張半径サイズ。負の値にすることができます。単位はピクセルです。
5.color: オプション。このパラメーターを省略すると、ブラウザーによってデフォルトの色が選択されます。一部のブラウザーは、影の色を設定します。
6.inset: オプションで、外側のシャドウを内側のシャドウに変更できます。
コード例:
例 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 上記のコードは影の水平方向と垂直方向のオフセットを設定するだけであり、ぼかし効果はありません。同時に、影の色は設定されていないため、ブラウザーはぼかし効果を設定しません。デフォルトの色を選択します。ブラウザごとに違いがあり、黒色のものと透明なものがあります。この属性をデフォルトにすることはお勧めしません。
例 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 上記のコードは、div の影のオフセットと影の色を設定します。
例 3
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 上記のコードは、div シャドウの水平方向と垂直方向のオフセット、ぼかし半径、影の色を設定します。
例 4:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 上記のコードは、div シャドウの水平および垂直オフセット、ブラー半径、シャドウ拡張半径、シャドウ カラーを設定します。
例 5:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html> 上記のコードは、div の内部シャドウを設定し、他のパラメーターを設定できます。
例 6:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red,10px 20px 15px 10px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
次のセクション