CSS学习（七）-边框阴影效果（下）

来源：互联网发布：wind学生版mac 编辑：程序博客网时间：2024/05/17 15:40

一、理论：
1.阴影层级：边框>内阴影>背景图片>背景色>外阴影
2.多层阴影：每层之间用逗号隔开
3.box-shadow兼容性：
a.在现代浏览器新版本无须加前缀，但旧版本需要加
b.ie8以下需要用ie滤镜来模拟实现
c.box-shadow具有多个参数可选，可制作出圆润的阴影效果
二、实践：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .box-shadow{            width: 200px;            height: 100px;            border:1px solid #cccccc;            border-radius: 5px;            box-shadow: inset 3px 3px 10px #06c;        }        img {            width: 200px;            height: 100px;            border: 1px solid #cccccc;            border-radius: 5px;            box-shadow: inset 3px 3px 10px #06c;        }    </style></head><body><div class="box-shadow"></div><img src = "images/tabs-image.jpg" alt="" width="200" /></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .box-shadow{            width: 200px;            height: 100px;            border:1px solid #0055cc;            border-radius: 5px;            box-shadow: -5px 0 5px red,                        0 5px 5px blue,                        5px 0 5px green,                        0 -5px 5px orange;        }        .box-shadow1{            border:50px;            width: 200px;            height: 100px;            border:1px solid #0055cc;            border-radius: 5px;            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 #662817,            0 0 0 20px #062817,            0 0 0 24px #209359;        }        .box-shadow2{            width: 200px;            height: 100px;            border:1px solid #0055cc;            border-radius: 5px;            box-shadow:                0 0 0 24px #209359.                0 0 0 1px red,                0 0 0 5px blue,                0 0 0 8px green,                0 0 0 12px yellow,                0 0 0 16px #662817,                0 0 0 20px #062817;        }    </style></head><body><div class="box-shadow" >1</div><div class="box-shadow1" >2</div><div class="box-shadow2" >3</div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        #formWrapper{            width: 250px;            padding: 0px;            margin: 20px;            overflow: hidden;            border-width: 1px;            border-style: solid;            border-color: #6bb2ff #062817 #189356 #291153;            box-shadow: 0 3px 3px rgba(255,255,255.1),            0 3px 0 #bbb ,            0 4px 0 #aaa,            0 5px 5px #283;            border-radius: 10px;            background-color: #f6f6f6 #bababa #aaa #bababa;            box-shadow: 0 3px 3px rgba(255,232,123,.1),                        0 3px 0 #bbb ,                        0 4px 0 #123589,                        0 5px 5px #183929;            border-radius: 10px;            background-color: #298693;            background-image: -webkit-gradient(linear,left top,left bottom,from(#a6f5f3),to(#196932));            background-image: -webkit-gradient(top,#a6f821,#f98263);            background-image: -moz-gradient(top,#a6f821,#f98263);            background-image: -ms-gradient(top,#a6f821,#f98263);            background-image: -o-gradient(top,#a6f821,#f98263);            background-image: linear-gradient(top,#31b231,#103863);            border-radius:3px;            text-shadow: 0 1px 0 rgba(0,0,0,.5);            box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 1px 0 #fff;        }        #formWrapper .btn:hover,        #formWrapper .btn:focus{            background-color: #31b2c6;            background-image: -webkit-gradient(linear,left top,left bottom,from(#0483a0),to(#31b2c3));            background-image: -webkit-gradient(top,#0483a0,#31b2c3);            background-image: -moz-gradient(top,#0483a0,#31b2c3);            background-image: -ms-gradient(top,#0483a0,#31b2c3);            background-image: -o-gradient(top,#0483a0,#31b2c3);            background-image: linear-gradient(top,#0483a0,#31b2c3);        }        #formWrapper .btn:active{            outline: 0;            box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;        }        #formWrapper::-moz-focus-inner{            border:0;        }    </style></head><body>    <form id = "formWrapper">        <div class = "formFiled clearfix">            <input type = "text" required="" placeholder="Search for Css3 ..." class="search">            <input type = "submit" class="btn submit" value = "go">        </div>    </form></body></html>

0 0