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