css3如何实现边框阴影

网页编辑器

浏览器（有调试功能的）

边框阴影（box-shadow）的基本语法：box-shadow：color  h-shadow  v-shadow blur spread  inset；color：阴影颜色 ------------ 可选h-shadow ：水平偏移量 ----必选          v-shadow：垂直偏移量-----必选blur：模糊距离 -------------可选spread：阴影尺寸---------- 可选inset：内阴影 --------------可选例子：css部分：.div1{            width:200px;            height:200px;            margin:20px auto;            line-height: 200px;            text-align: center;            background: cadetblue;            border:2px solid darkslategray;            box-shadow: darkgrey 10px 10px 30px 5px ;//边框阴影        }html部分：

内外阴影在边框阴影（box-shadow）的基本语法中，参数inset是可选可不选的，选参数inset，将外部阴影改为内部阴影；而不选参数inset，即默认情况下是外部阴影的。例子：css部分：.div2{            width:200px;            height:200px;            margin:50px auto;            line-height: 200px;            text-align: center;            background: burlywood;            border:2px solid #e4007e;            box-shadow: darkgrey 0px 0px 30px 5px inset;//边框内阴影        }html部分：

偏移量（ h-shadow 、 v-shadow）在上面第二步的基础上添加水平和垂直10px的偏移量。对于外阴影，偏移量相当于从图形的正后方，向右下进行了偏移；而对于内阴影，偏移量相当于图形内部没有被阴影覆盖的部分向右下进行了偏移。例子：css部分：.div2{            width:200px;            height:200px;            margin:50px auto;            line-height: 200px;            text-align: center;            background: burlywood;            border:2px solid #e4007e;            box-shadow: darkgrey 10px 10px 30px 10px inset;//边框内阴影        }html部分：

阴影尺寸（参数spread）阴影尺寸就是指阴影外延出去总的长度。将除阴影尺寸以外的值都设置为0，就能直观的查看阴影尺寸。例子：css部分：.div3{            width:200px;            height:200px;            margin:50px auto;            line-height: 200px;            text-align: center;            background: salmon;            border:2px solid #e4007e;            box-shadow: darkgrey 0px 0px 0px 10px inset;        }        .div4{            width:200px;            height:200px;            margin:50px auto;            line-height: 200px;            text-align: center;            background: salmon;            border:2px solid #e4007e;            box-shadow: darkgrey 0px 0px 0px 10px;        }html部分：

模糊距离（blur）把除模糊距离外的其他值都设置为0，模糊距离设置为200px，与边长相等，对比边框内外阴影的效果例子：css部分： .div5{            width:200px;            height:200px;            margin:300px auto;            line-height: 200px;            text-align: center;            background: skyblue;            border:2px solid #e4007e;            box-shadow: darkgrey 0px 0px 0px 200px;        }        .div6{            width:200px;            height:200px;            margin:300px auto;            line-height: 200px;            text-align: center;            background: skyblue;            border:2px solid #e4007e;            box-shadow: darkgrey 0px 0px 0px 200px inset;        }html部分

ie6~ie8都不支持边框阴影（text-shadow），ie9+Firefox4，Chrome，Opera及Safari5.1.1支持边框阴影属性（text-shadow）

希望小编分享的原创经验对好伙伴们有所帮助，如果小伙伴们有对本经验有任何疑问，请在下方评论处留言讨论，小编第一时间来解答！