在css3中box-shadow什麼意思-前端問答-PHP中文網

内阴影示例

3边内影示例

外阴影示例

右下外阴影示例

扩大阴影示例

半透明阴影色示例

首頁

web前端

前端問答

在css3中box-shadow什麼意思

青灯夜游

Feb 28, 2022 pm 04:50 PM

box-shadow css3

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

在css3中box-shadow什麼意思

本教學操作環境：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="/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什麼意思

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