css3におけるbox-shadowは何を意味しますか-フロントエンドQ&A-php.cn

内阴影示例

3边内影示例

外阴影示例

右下外阴影示例

扩大阴影示例

半透明阴影色示例

ホームページ

ウェブフロントエンド

フロントエンドQ&A

css3におけるbox-shadowは何を意味しますか

Feb 28, 2022 pm 04:50 PM

box-shadow css3

CSS3 では、「box-shadow」は「ボックスシャドウ」を意味します。これは要素に境界線の影を追加する新しい属性です。この属性はボックスに 1 つ以上の影を追加できます。構文は「box -shadow」です。 : 水平シャドウ垂直シャドウブラー距離サイズカラーインセット;"。

css3におけるbox-shadowは何を意味しますか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3におけるbox-shadowは何を意味しますか

CSS3 では、「box-shadow」は「ボックスシャドウ」を意味します。これは、要素に境界線の影を追加する新しい属性です。

css3におけるbox-shadowは何を意味しますか

# box-shadow プロパティは、ボックスに 1 つ以上の影を追加します。

注: 美しいスケーラブルなボタンを作成するには、border-image-* 属性を使用してください。

構文:

box-shadow: h-shadow v-shadow blur spread color inset;

ログイン後にコピー

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

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

以下は、私が全員のために行ったいくつかの小さなテストです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

ログイン後にコピー

実行結果:
css3におけるbox-shadowは何を意味しますか

また、「学習」も実践しました。「ポラロイド」写真を作成し、写真を回転する方法。例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
body
{
	margin:30px;
	background-color:#E9E9E9;
}

div.polaroid
{
	width:294px;
	padding:10px 10px 20px 10px;
	border:1px solid #BFBFBF;
	background-color:white;
	/* Add box-shadow */
	box-shadow:2px 2px 3px #aaaaaa;
}

div.rotate_left
{
	float:left;
	-ms-transform:rotate(7deg); /* IE 9 */
	-webkit-transform:rotate(7deg); /* Safari and Chrome */
	transform:rotate(7deg);
}

div.rotate_right
{
	float:left;
	-ms-transform:rotate(-8deg); /* IE 9 */
	-webkit-transform:rotate(-8deg); /* Safari and Chrome */
	transform:rotate(-8deg);
}
</style>
</head>
<body>

<div class="polaroid rotate_left">
<img src="/static/imghw/default1.png"  data-src="pulpitrock.jpg"  class="lazy"   alt=""    style="max-width:90%"  style="max-width:90%">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>

<div class="polaroid rotate_right">
<img src="/static/imghw/default1.png"  data-src="cinqueterre.jpg"  class="lazy"   alt=""    style="max-width:90%"  style="max-width:90%">
<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
</div>


</body>
</html>

ログイン後にコピー

実行結果は次のとおりです:

css3におけるbox-shadowは何を意味しますか

· ボックスシャドウのシャドウには、内側のシャドウ、外側のシャドウなど、さまざまな種類があります。シャドウ、三面シャドウ、両面シャドウシャドウ、片面シャドウ、ウエスタンストローク...、

の意味:

css3におけるbox-shadowは何を意味しますか例:

<div class="flex">
  <div class="flex-item">
    <h3 id="内阴影示例">内阴影示例</h3>
    <div class="box boxshadow1"></div>
  </div>
  <div class="flex-item">
    <h3 id="边内影示例">3边内影示例</h3>
    <div class="box boxshadow2"></div>
  </div>
  <div class="flex-item">
    <h3 id="外阴影示例">外阴影示例</h3>
    <div class="box boxshadow3"></div>
  </div>
  <div class="flex-item">
    <h3 id="右下外阴影示例">右下外阴影示例</h3>
    <div class="box boxshadow4"></div>
  </div>
  <div class="flex-item">
    <h3 id="扩大阴影示例">扩大阴影示例</h3>
    <div class="box boxshadow5"></div>
  </div>
  <div class="flex-item">
    <h3 id="半透明阴影色示例">半透明阴影色示例</h3>
    <div class="box boxshadow6"></div>
  </div>
</div>

ログイン後にコピー

css:

.flex{display:flex;flex-wrap:wrap;} 
.flex-item{margin-right:30px;}

.box {  background-color: #CCCCCC; border-radius:10px; width: 200px; height: 200px;  }
.boxshadow1{ box-shadow:inset 0px 0px 5px 1px #000; }
.boxshadow2{ box-shadow:inset 0 1px 2px 1px #000; }
.boxshadow3{box-shadow:0 0 10px #000;}
.boxshadow4{box-shadow:2px 2px 5px #000;}
.boxshadow5{box-shadow:0 0 5px 15px #000;}
.boxshadow6{box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);}

ログイン後にコピー

実行結果:

css3におけるbox-shadowは何を意味しますか