シャドウボックス-シャドウ

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>

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転