1、先來一個(gè)最簡單最常用的box-shadow屬性陰影案例:
邊框陰影,四邊都是陰影,目前扁平化網(wǎng)站中唯一常用的一種效果,特別是鼠標(biāo)觸發(fā)后邊框帶陰影更是常用。
上圖的代碼和CSS如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標(biāo)題文檔</title> </head> <body> <style> div { width: 500px; height: 200px; border:1px solid #eee;box-shadow: 0 0 5px rgba(0,0,0,.1);} </style> <div>哈哈,我知道了。</div> </body> </html>
2、如果需求更多特效,看下面的演示站吧,看你需求用box-shadow做陰影:
HTML和CSS:
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>CSS3屬性:box-shadow測試</title> <style type="text/css"> .box-shadow-1{ -webkit-box-shadow: 3px 3px 3px; -moz-box-shadow: 3px 3px 3px; box-shadow: 3px 3px 3px; } .box-shadow-2{ -webkit-box-shadow:0 0 10px #0CC; -moz-box-shadow:0 0 10px #0CC; box-shadow:0 0 10px #0CC; } .box-shadow-3{ -webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5); -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5); box-shadow:0 0 10px rgba(0, 204, 204, .5); } .box-shadow-4{ -webkit-box-shadow:0 0 10px 15px #0CC; -moz-box-shadow:0 0 10px 15px #0CC; box-shadow:0 0 10px 15px #0CC; } .box-shadow-5{ -webkit-box-shadow:inset 0 0 10px #0CC; -moz-box-shadow:inset 0 0 10px #0CC; box-shadow:inset 0 0 10px #0CC; } .box-shadow-6{ box-shadow: -10px 0 10px red, /*左邊陰影*/ 10px 0 10px yellow, /*右邊陰影*/ 0 -10px 10px blue, /*頂部陰影*/ 0 10px 10px green; /*底邊陰影*/ } .box-shadow-7{ box-shadow:0 0 10px 5px black, 0 0 10px 20px red; } .box-shadow-8{ box-shadow:0 0 10px 20px red, 0 0 10px 5px black; } .box-shadow-9{ box-shadow: 0 0 0 1px red; } .obj{ float: left; width:100px; height:100px; margin:50px 20px; background:#eee; } .outer{ width: 100px; height: 100px; border: 1px solid red; } .inner{ width: 60px; height: 60px; background-color: red; -webkit-box-shadow: 50px 50px blue; -moz-box-shadow: 50px 50px blue; box-shadow: 50px 50px blue; } </style> </head> <body> <div class="obj box-shadow-1"></div> <div class="outer"> <div class="inner"></div> </div> <div class="obj box-shadow-2" >1</div> <div class="obj box-shadow-3" >2</div> <div class="obj box-shadow-4" >3</div> <div class="obj box-shadow-5" >4</div> <div class="obj box-shadow-6" >5</div> <div class="obj box-shadow-7" >6</div> <div class="obj box-shadow-8" >7</div> <div class="obj box-shadow-9" >8</div> </body> </html>