css3如何实现边框阴影

分类栏目:前端秘籍

132

利用边框阴影,可以制作出光晕、浮雕等原来只有依赖P图才能完成的效果。ie6~ie8都不支持边框阴影,ie9+Firefox4,Chrome,Opera及Safari5.1.1支持边框阴影属性.

box-shadow:color  h-shadow  v-shadow blur spread  inset;

color:阴影颜色 ------------ 可选

h-shadow :水平偏移量 ----必选          

v-shadow:垂直偏移量-----必选

blur:模糊距离 -------------可选

spread:阴影尺寸---------- 可选

inset:内阴影 --------------可选


内外阴影

在边框阴影(box-shadow)的基本语法中,参数inset是可选可不选的,选参数inset,将外部阴影改为内部阴影;而不选参数inset,即默认情况下是外部阴影的。


偏移量( h-shadow 、 v-shadow)

在上面第二步的基础上添加水平和垂直10px的偏移量。对于外阴影,偏移量相当于从图形的正后方,向右下进行了偏移;而对于内阴影,偏移量相当于图形内部没有被阴影覆盖的部分向右下进行了偏移。


阴影尺寸(参数spread)

阴影尺寸就是指阴影外延出去总的长度。将除阴影尺寸以外的值都设置为0,就能直观的查看阴影尺寸。


模糊距离(blur)

把除模糊距离外的其他值都设置为0,模糊距离设置为200px,与边长相等,对比边框内外阴影的效果