<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
*{margin:0;padding:0;}
/**************************** CSS3盒子阴影属性 ***************************/
/* box-shadow:none | [inset x-offset y-offset blur-radius spreed-radius color],[inset x-offset y-offset blur-radius spread-radius color] */
#boxShadow1>div{border:1px solid #ccc;width:100px;height:50px;display:inline-block;margin:10px;}
/* x-offset正值,生成右阴影,负值,生成左阴影 */
/* y-offset正值,生成底阴影,负值,生成顶阴影 */
#boxShadow1>div:nth-child(1){box-shadow:0 -5px 0 red;}
#boxShadow1>div:nth-child(2){box-shadow:5px 0 0 green;}
#boxShadow1>div:nth-child(3){box-shadow:0 5px 0 blue;}
#boxShadow1>div:nth-child(4){box-shadow:-5px 0 0 orange;}
/* blur-radius设置阴影半径模糊(会给其他3边带入淡淡的阴影) */
#boxShadow1>div:nth-of-type(5){box-shadow:0 -5px 5px red;}
#boxShadow1>div:nth-of-type(6){box-shadow:5px 0 5px green;}
#boxShadow1>div:nth-of-type(7){box-shadow:0 5px 5px blue;}
#boxShadow1>div:nth-of-type(8){box-shadow:-5px 0 5px orange;}
/* spread-radius设置阴影扩散半径,可实现单边阴影效果 */
#boxShadow1>div:nth-of-type(9){box-shadow:0 -5px 5px -3px red;}
#boxShadow1>div:nth-of-type(10){box-shadow:5px 0 5px -3px green;}
#boxShadow1>div:nth-of-type(11){box-shadow:0 5px 5px -3px blue;}
#boxShadow1>div:nth-of-type(12){box-shadow:-5px 0 5px -3px orange;}
/* 四边相同的阴影效果 */
#boxShadow2>div{border:1px solid #ccc;border-radius:10px;width:200px;height:100px;margin-left:20px;display:inline-block;}
#boxShadow2>div:nth-of-type(1){box-shadow:0 0 10px #06c;}
#boxShadow2>div:nth-of-type(2){box-shadow:0 0 10px 10px #06c;}
#boxShadow2>div:nth-of-type(3){box-shadow:0 0 10px -10px #06c;}
/* box-shadow可用来制作边框效果,但并非边框,因其不是盒模型,不会计算入内容宽度,不会影响页面布局 */
#boxShadow3>div:nth-of-type(1){box-shadow:0 0 0 10px #06c;border:1px solid #ccc;border-radius:10px;width:200px;height:100px;margin:20px;display:inline-block;}
#boxShadow3>div:nth-of-type(2){border:10px solid #ccc;border-radius:10px;width:200px;height:100px;margin:20px;display:inline-block;}
/* inset属性可以设置内阴影 */
#boxShadow4>div{box-shadow:inset 3px 3px 10px #06c;width:200px;height:100px;margin:20px;}
/* 内阴影用在img会失效解决方法 */
#boxShadow5>img{box-shadow:inset 5px 5px 10px #06c;}
#boxShadow5>div{box-shadow:inset 5px 5px 10px #06c;display:inline-block;}
#boxShadow5>div>img{position:relative;z-index:-1;}
/* box-shadow可多层阴影同时使用,每层阴影使用逗号分隔,需注意阴影顺序,第一层阴影太宽,会遮盖后续阴影 */
#boxShadow6>div:nth-of-type(1){box-shadow:0 0 0 1px red,0 0 0 5px blue,0 0 0 8px green,0 0 0 12px yellow,0 0 0 16px orange;width:100px;height:50px;margin:20px;display:inline-block;}
#boxShadow6>div:nth-of-type(2){box-shadow:0 0 0 20px red,0 0 0 5px blue,0 0 0 8px green,0 0 0 12px yellow,0 0 0 16px orange;width:100px;height:50px;margin:20px;display:inline-block;}
/* 3D表单 */
#boxShadow7>form{box-shadow:0 3px 3px rgba(255,255,255,.1),0 3px 0 #bbb,0 4px 0 #aaa,0 5px 5px #444;border:1px solid #ccc;border-radius:10px;width:450px;margin:10px;padding:5px;}
#boxShadow7>form input[type=text]{box-shadow:inset 0 5px 10px #ddd;border:1px solid #ccc;border-radius:5px;width:390px;height:20px;padding:5px;outline:none;}
#boxShadow7>form input[type=submit]{border:1px solid #00748f;border-radius:5px;background:#0483a0;color:#fafafa;padding:5px 10px;}
</style>
</head>
<body>
<div id="boxShadow1">
<div></div>
<div></div>
<div></div>
<div></div><br />
<div></div>
<div></div>
<div></div>
<div></div><br />
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="boxShadow2">
<div></div>
<div></div>
<div></div>
</div>
<div id="boxShadow3">
<div></div>
<div></div>
</div>
<div id="boxShadow4">
<div></div>
</div>
<div id="boxShadow5">
<img src="images/icon.png" />
<div>
<img src="images/icon.png" />
</div>
</div>
<div id="boxShadow6">
<div></div>
<div></div>
</div>
<div id="boxShadow7">
<form>
<div>
<input type="text" placeholder="Search for..." />
<input class="btn" type="submit" value="Go" />
</div>
</form>
</div>
</body>
</html>
盒子阴影
最新推荐文章于 2024-02-15 17:01:04 发布