站長(zhǎng)資訊網(wǎng)本文目標(biāo)：
1、掌握CSS3中內(nèi)陰影和外陰影的用法
問(wèn)題：
1、要求使用純DIV+CSS實(shí)現(xiàn)如下效果
附加說(shuō)明：
1、效果一中的水平陰影大小為4，垂直陰影為2，模糊度為6
2、效果二中的水平陰影為0，垂直陰影為0，模糊度30
3、整體寬度為800px,居中顯示
4、圖片大小為180px,高度也是180px
思路分析：
1、創(chuàng)建2個(gè)列表，每個(gè)列表上帶個(gè)標(biāo)題
2、第一個(gè)列表，展示4張圖片，但是每張圖片要帶外陰影效果
3、第二個(gè)列表，展示4張圖片，但是每張圖片要帶內(nèi)陰影效果
具體實(shí)現(xiàn)如下：
1、準(zhǔn)備素材，一張張柏芝的圖片，在根目錄創(chuàng)建images,將素材放入其中，方便圖片管理
2、創(chuàng)建index.html,并把架構(gòu)先寫(xiě)好
<!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、填充細(xì)節(jié)部分，把相關(guān)的元素寫(xiě)進(jìn)來(lái)
分析：
1、創(chuàng)建列表一般我們是用ul
2、第一個(gè)列表的陰影效果我們?nèi)∶凶鯾oxshadow1
3、因?yàn)楦鶕?jù)效果我們可以看出每個(gè)li都需要float，所以我們需要單獨(dú)的添加一個(gè)clear li ,這樣可以讓ul包裹住里面浮動(dòng)的li
4、最后一列要做特別的樣式處理不需要margin-left，所以樣式名字我們給它取名為lastitem,這樣方便單獨(dú)為其進(jìn)行樣式設(shè)置
5、因?yàn)槲覀儼l(fā)現(xiàn)2個(gè)列表其實(shí)樣式都差不多，唯一的區(qū)別就是陰影效果不同，所以創(chuàng)建第二個(gè)列表的時(shí)候可以直接copy第一個(gè)，只是第二個(gè)列表的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、寫(xiě)樣式
根目錄創(chuàng)建css目錄，里面新建index.css，里面的樣式怎么寫(xiě)呢
思路分析：
.container分析
1、通常最外層的容器我們可以為里面所有子元素定義一些共同的屬性，比如padding:0,margin:0，這樣防止一些元素有默認(rèn)的padding,margin，影響我們的思路
所以index.css添加代碼如下：
.container *{ padding:0; margin: 0; }
p段落分析
1、文字要居中
所以index.css添加代碼如下：
p{ text-align: center; }
ul 分析
1、根據(jù)要求得知，ul width=800px,同時(shí)要居中(margin:0 auto),為了方便看居中效果，所以我們?yōu)樗O(shè)置一個(gè)border:1px solid red
所以index.css添加代碼如下：
.shadow{ width:800px; margin:10px auto; border:1px solid red; }
ul li 分析
1、根據(jù)要求得知，圖片大小為180,我們可以把li的寬度設(shè)置為180,height=180,呈正方形顯示，然后因?yàn)槭撬脚帕?，所以float:left,不帶黑色圓點(diǎn)，所以list-style:none,
然后右間距為 800-（180*4）=80 然后80/3 約等于 26.6,即margin-right:26.6
2、但是最后面的圖片所在li，沒(méi)有margin-right,所以還需要單獨(dú)為li.lastitem設(shè)置一下
3、為了讓ul依然能夠包裹住里面的li，我們需要為最后一列l(wèi)i.clear 清除一下浮動(dòng)，且該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，只要設(shè)置width:100%即可，讓圖片的寬=所在li的寬
所以index.css添加代碼如下：
.shadow li img{width:100%;}
陰影分析
1、外陰影效果，根據(jù)要求得知，box-shadow x-shadow:4px y-shadow:2px 模糊度=6px 顏色為#333333，名字就叫做boxshadow1
2、內(nèi)陰影效果，根據(jù)要求得知，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; }
好，到目前為止，我們就把所有我們能想到的樣式寫(xiě)完了，最后根據(jù)結(jié)果再做修改調(diào)整，到此為止，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、接下來(lái)，我們把樣式文件引入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>
運(yùn)行效果如下：
根據(jù)結(jié)果我們仔細(xì)觀察，會(huì)發(fā)現(xiàn)第一個(gè)效果是合我們的意圖，但是第二個(gè)的內(nèi)陰影效果沒(méi)有實(shí)現(xiàn)出來(lái)，為什么呢？
是不是樣式失效了呢？接下來(lái)稍微修改一下代碼，把最后一個(gè)圖片去掉看下
<!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>
運(yùn)行效果如下：
說(shuō)明什么呢？說(shuō)明樣式其實(shí)是對(duì)的，確實(shí)是內(nèi)陰影的效果，但是為什么加上圖片就看不到內(nèi)陰影的效果了呢，這里是重點(diǎn)
當(dāng)要為圖片設(shè)置內(nèi)陰影的時(shí)候，如果只是設(shè)置圖片外層的容器陰影，它的陰影效果會(huì)被圖片遮住，所以需要為圖片再設(shè)置position: relative;z-index:-1;才可以
接下來(lái)我們?cè)囋?，在index.css中修改img樣式如下：
.boxshadow2 img{ position: relative; z-index:-1; width: 100%; }
然后再來(lái)運(yùn)行看下：
我們發(fā)現(xiàn)內(nèi)陰影的效果就出來(lái)了，好接下來(lái)，去掉紅色邊框，恢復(fù)最后一張圖片
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>
運(yùn)行結(jié)果如下：
到此為止，效果就全部實(shí)現(xiàn)了
總結(jié)：
1、通過(guò)案例講解了box-shadow內(nèi)陰影，外陰影的兩種用法
外陰影語(yǔ)法：box-shadow:x-offset y-offset 模糊度 顏色
內(nèi)陰影語(yǔ)法，在上面語(yǔ)法的基礎(chǔ)上+inset
x-offset,y-offset的值可正可負(fù)
x-offset為正表示向右，負(fù)數(shù)向左
y-offset為正表示向下，負(fù)數(shù)向上
2、要注意為圖片添加內(nèi)陰影，可以通過(guò)設(shè)置position:relative,z-index實(shí)現(xiàn)
希望本文能給大家?guī)?lái)一定的幫助，謝謝?。?！
