首頁 > 文章 > web前端 > 在css3中box-shadow什麼意思

在css3中box-shadow什麼意思

青灯夜游原創: 2022-02-28 16:50:156745瀏覽

在css3中，“box-shadow”的意思為“盒子陰影”，是一個為元素添加邊框陰影的新增屬性；該屬性可以向框添加一個或多個陰影，語法“box -shadow: 水平陰影垂直陰影模糊距離尺寸顏色inset;」。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css3中box-shadow什麼意思

在css3中，「box-shadow」的意思為“盒子陰影”，是一個為元素添加邊框陰影的新增屬性。

在css3中box-shadow什麼意思

box-shadow屬性為框添加一個或多個陰影。

註解：使用 border-image-* 屬性來建構漂亮的可伸縮按鈕！

語法：

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

box-shadow 在方塊上新增一個或多個陰影。此屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵字來規定。省略長度的值是 0。

h-shadow 必要。水平陰影的位置。允許負值。
v-shadow 必要。垂直陰影的位置。允許負值。
blur 可選。模糊距離。
spread 可選。陰影的尺寸。
color 可選。陰影的顏色。請參閱 CSS 顏色值。
inset 可選。將外部陰影 (outset)改為內部陰影。

以下是我給大家做的幾個小測試：

<!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什麼意思

其中我們也演練如何創建"polaroid"的照片和旋轉圖片。例如：

<!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="pulpitrock.jpg" alt="" width="284"    style="max-width:90%">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>

<div class="polaroid rotate_right">
<img src="cinqueterre.jpg" alt="" width="284"    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什麼意思

·box-shadow陰影有許多種，例如：內陰影、外陰影、三邊陰影、雙邊陰影、單邊陰影、西線描邊·······、

代表的意思就是：

在css3中box-shadow什麼意思例如：

<div class="flex">
  <div class="flex-item">
    <h3>内阴影示例</h3>
    <div class="box boxshadow1"></div>
  </div>
  <div class="flex-item">
    <h3>3边内影示例</h3>
    <div class="box boxshadow2"></div>
  </div>
  <div class="flex-item">
    <h3>外阴影示例</h3>
    <div class="box boxshadow3"></div>
  </div>
  <div class="flex-item">
    <h3>右下外阴影示例</h3>
    <div class="box boxshadow4"></div>
  </div>
  <div class="flex-item">
    <h3>扩大阴影示例</h3>
    <div class="box boxshadow5"></div>
  </div>
  <div class="flex-item">
    <h3>半透明阴影色示例</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什麼意思

（學習影片分享：css影片教學、web前端入門教程）

以上是在css3中box-shadow什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 border

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html5的上一代語言是什麼下一篇：html5的上一代語言是什麼

看更多