溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、掌握CSS3中內陰影和外陰影的用法
問題：
1、要求使用純DIV+CSS實現如下效果
附加說明：
1、效果一中的水平陰影大小為4，垂直陰影為2，模糊度為6
2、效果二中的水平陰影為0，垂直陰影為0，模糊度30
3、整體寬度為800px,居中顯示
4、圖片大小為180px,高度也是180px
思路分析：
1、創建2個列表，每個列表上帶個標題
2、第一個列表，展示4張圖片，但是每張圖片要帶外陰影效果
3、第二個列表，展示4張圖片，但是每張圖片要帶內陰影效果
具體實現如下：
1、準備素材，一張張柏芝的圖片，在根目錄創建images,將素材放入其中，方便圖片管理
2、創建index.html,并把架構先寫好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>帶陰影圖片展示列表</title>
</head>
<body>
<div class="container">
<!-- 陰影效果一 -->
<p>陰影效果一</p>
<ul class="shadow ">
</ul>
<!-- 陰影效果二 -->
<p>陰影效果二</p>
<ul class="shadow">
</ul>
</div>
</body>
</html>3、填充細節部分，把相關的元素寫進來
分析：
1、創建列表一般我們是用ul
2、第一個列表的陰影效果我們取名叫做boxshadow1
3、因為根據效果我們可以看出每個li都需要float，所以我們需要單獨的添加一個clear li ,這樣可以讓ul包裹住里面浮動的li
4、最后一列要做特別的樣式處理不需要margin-left，所以樣式名字我們給它取名為lastitem,這樣方便單獨為其進行樣式設置
5、因為我們發現2個列表其實樣式都差不多，唯一的區別就是陰影效果不同，所以創建第二個列表的時候可以直接copy第一個，只是第二個列表的li的樣式我們就叫做boxshadow2
最終代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>帶陰影圖片展示列表</title>
</head>
<body>
<div class="container">
<!-- 陰影效果一 -->
<p>陰影效果一</p>
<ul class="shadow">
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="lastitem boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="clear" ></li>
</ul>
<!-- 陰影效果二 -->
<p>陰影效果二</p>
<ul class="shadow">
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="lastitem boxshadow2">
<img src="images/zbz.jpg" />
</li>
<li class="clear" ></li>
</ul>
</div>
</body>
</html>4、寫樣式
根目錄創建css目錄，里面新建index.css，里面的樣式怎么寫呢
思路分析：
.container分析
1、通常最外層的容器我們可以為里面所有子元素定義一些共同的屬性，比如padding:0,margin:0，這樣防止一些元素有默認的padding,margin，影響我們的思路
所以index.css添加代碼如下：
.container *{
padding:0;
margin: 0;
}p段落分析
1、文字要居中
所以index.css添加代碼如下：
p{ text-align: center; }ul 分析
1、根據要求得知，ul width=800px,同時要居中(margin:0 auto),為了方便看居中效果，所以我們為它設置一個border:1px solid red
所以index.css添加代碼如下：
.shadow{
width:800px;
margin:10px auto;
border:1px solid red;
}ul li 分析
1、根據要求得知，圖片大小為180,我們可以把li的寬度設置為180,height=180,呈正方形顯示，然后因為是水平排列，所以float:left,不帶黑色圓點，所以list-style:none,
然后右間距為 800-（180*4）=80 然后80/3 約等于 26.6,即margin-right:26.6
2、但是最后面的圖片所在li，沒有margin-right,所以還需要單獨為li.lastitem設置一下
3、為了讓ul依然能夠包裹住里面的li，我們需要為最后一列li.clear 清除一下浮動，且該li的width,height都要為0
所以index.css添加代碼如下：
.shadow li{
list-style: none;
float: left;
width: 180px;
height: 180px;
margin-right: 26.5px;
}
.shadow li.lastitem{
margin-right: 0;
}
.shadow li.clear{
clear: both;
float: none;
width: 0;
height: 0;
}圖片分析
1、圖片要顯示為180，只要設置width:100%即可，讓圖片的寬=所在li的寬
所以index.css添加代碼如下：
.shadow li img{width:100%;}陰影分析
1、外陰影效果，根據要求得知，box-shadow x-shadow:4px y-shadow:2px 模糊度=6px 顏色為#333333，名字就叫做boxshadow1
2、內陰影效果，根據要求得知，box-shadow x-shadow:0 y-shadow:0,模糊度為30px,顏色一樣，名字就叫做boxshadow2
所以index.css添加代碼如下：
.boxshadow1{box-shadow:4px 2px 6px #333333; }
.boxshadow2{
box-shadow: 0px 0px 30px #333333 inset;
}好，到目前為止，我們就把所有我們能想到的樣式寫完了，最后根據結果再做修改調整，到此為止，index.css的最終代碼如下
.container *{
padding:0;
margin: 0;
}
p{ text-align: center; }
.shadow{
width:800px;
margin:10px auto;
border:1px solid red;
}
.shadow li{
list-style: none;
float: left;
width: 180px;
height: 180px;
margin-right: 26.5px;
}
.shadow li.lastitem{
margin-right: 0;
}
.shadow li.clear{
clear: both;
float: none;
width: 0;
height: 0;
}
.shadow li img{width:100%;}
/* 陰影 */
.boxshadow1{box-shadow:4px 2px 6px #333333; }
.boxshadow2{
box-shadow: 0px 0px 30px #333333 inset;
}
.shadow li img{width:100%;}5、接下來，我們把樣式文件引入index.html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>帶陰影圖片展示列表</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<!-- 陰影效果一 -->
<p>陰影效果一</p>
<ul class="shadow">
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="lastitem boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="clear" ></li>
</ul>
<!-- 陰影效果二 -->
<p>陰影效果二</p>
<ul class="shadow">
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="lastitem boxshadow2">
<img src="images/zbz.jpg" />
</li>
<li class="clear" ></li>
</ul>
</div>
</body>
</html>運行效果如下：
根據結果我們仔細觀察，會發現第一個效果是合我們的意圖，但是第二個的內陰影效果沒有實現出來，為什么呢？
是不是樣式失效了呢？接下來稍微修改一下代碼，把最后一個圖片去掉看下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>帶陰影圖片展示列表</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<!-- 陰影效果一 -->
<p>陰影效果一</p>
<ul class="shadow">
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="lastitem boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="clear" ></li>
</ul>
<!-- 陰影效果二 -->
<p>陰影效果二</p>
<ul class="shadow">
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="lastitem boxshadow2">
<!-- <img src="images/zbz.jpg" /> -->
</li>
<li class="clear" ></li>
</ul>
</div>
</body>
</html>運行效果如下：
說明什么呢？說明樣式其實是對的，確實是內陰影的效果，但是為什么加上圖片就看不到內陰影的效果了呢，這里是重點
當要為圖片設置內陰影的時候，如果只是設置圖片外層的容器陰影，它的陰影效果會被圖片遮住，所以需要為圖片再設置position: relative;z-index:-1;才可以
接下來我們試試，在index.css中修改img樣式如下：
.boxshadow2 img{
position: relative;
z-index:-1;
width: 100%;
}然后再來運行看下：
我們發現內陰影的效果就出來了，好接下來，去掉紅色邊框，恢復最后一張圖片
index.css修改后代碼下
.container *{
padding:0;
margin: 0;
}
p{ text-align: center; }
.shadow{
width:800px;
margin:10px auto;
/* border:1px solid red; */
}
.shadow li{
list-style: none;
float: left;
width: 180px;
height: 180px;
margin-right: 26.6px;
}
.shadow li.lastitem{
margin-right: 0;
}
.shadow li.clear{
clear: both;
float: none;
width: 0;
height: 0;
}
.shadow li img{width:100%;}
/* 陰影 */
.boxshadow1{box-shadow:4px 2px 6px #333333; }
.boxshadow2{
box-shadow: 0px 0px 30px #333333 inset;
}
.boxshadow2 img{
position: relative;
z-index:-1;
width: 100%;
}index.html代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>帶陰影圖片展示列表</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="container">
<!-- 陰影效果一 -->
<p>陰影效果一</p>
<ul class="shadow">
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="lastitem boxshadow1"><img src="images/zbz.jpg" /></li>
<li class="clear" ></li>
</ul>
<!-- 陰影效果二 -->
<p>陰影效果二</p>
<ul class="shadow">
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="boxshadow2"><img src="images/zbz.jpg" /></li>
<li class="lastitem boxshadow2">
<img src="images/zbz.jpg" />
</li>
<li class="clear" ></li>
</ul>
</div>
</body>
</html>運行結果如下：
到此為止，效果就全部實現了
1、通過案例講解了box-shadow內陰影，外陰影的兩種用法
外陰影語法：box-shadow:x-offset y-offset 模糊度 顏色
內陰影語法，在上面語法的基礎上+inset
x-offset,y-offset的值可正可負
x-offset為正表示向右，負數向左
y-offset為正表示向下，負數向上
2、要注意為圖片添加內陰影，可以通過設置position:relative,z-index實現
以上就是CSS3邊框陰影實現2種圖片列表展示效果-案例解析（代碼實例 ）的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
