溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了在css3中box-shadow怎么應用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇在css3中box-shadow怎么應用文章都會有所收獲，下面我們一起來看看吧。
在css3中，“box-shadow”的意思為“盒子陰影”，是一個為元素添加邊框陰影的新增屬性；該屬性可以向框添加一個或多個陰影，語法“box-shadow: 水平陰影 垂直陰影 模糊距離 尺寸 顏色 inset;”。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
在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>運行結果：
其中我們還演練了如何創建"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" height="213">
<p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
</div>
<div class="polaroid rotate_right">
<img src="cinqueterre.jpg" alt="" width="284" height="213">
<p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
</div>
</body>
</html>運行結果如下：
·box-shadow陰影有許多種，比如：內陰影、外陰影、三邊陰影、雙邊陰影、單邊陰影、西線描邊·······、
代表的意思就是：
例如：
<div class="flex"> <div class="flex-item"> <h4>內陰影示例</h4> <div class="box boxshadow1"></div> </div> <div class="flex-item"> <h4>3邊內影示例</h4> <div class="box boxshadow2"></div> </div> <div class="flex-item"> <h4>外陰影示例</h4> <div class="box boxshadow3"></div> </div> <div class="flex-item"> <h4>右下外陰影示例</h4> <div class="box boxshadow4"></div> </div> <div class="flex-item"> <h4>擴大陰影示例</h4> <div class="box boxshadow5"></div> </div> <div class="flex-item"> <h4>半透明陰影色示例</h4> <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怎么應用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“在css3中box-shadow怎么應用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
