box-shadow pc端浏览器兼容性问题

语法

如果 h-shadow 为0 时,加inset左右两边都有内阴影,如果不加inset左右两边都有外阴影

如果 h-shadow 为负数 时,加inset右边有内阴影,如果不加inset左边有外阴影

如果 h-shadow 为正数 时,加inset上边有内阴影,如果不加inset下边有外阴影

如果 v-shadow 为0 时,加inset上下两边都有内阴影,如果不加inset上下两边都有外阴影

如果 v-shadow 为负数 时,加inset下边有内阴影,如果不加inset上边有外阴影

如果 v-shadow 为正数 时,加inset上边有内阴影,如果不加inset下边有外阴影

blur 为正数 时,加inset边有阴影的宽度 + 内阴影模糊地宽度(blur的px),如果不加inset 阴影的宽度 + 外阴影模糊的宽度(blur的px)

blur 为0时 时,没有阴影模糊地范围,只有阴影的宽度 h-shadow, v-shadow

spread 阴影的尺寸, h-shadow 的宽度以及效果加上 spread 的宽度,就是整个阴影的宽度

color 阴影的颜色,如果如果边框阴影效果在android系统上没有效果,就把颜色值由16进制改为rgba即可

inset 内阴影,如果需要外阴影改为 outset 如果不写,默认是外阴影

 

解决浏览器边框阴影兼容性问题

-moz-box-shadow:2px 2px 5px #969696; /*firefox*/

-webkit-box-shadow:2px 2px 5px #969696; /*webkit*/

box-shadow:2px 2px 5px #969696; /*opera或ie9*/