.build-group h3, .build-group ul { background: none repeat scroll 0 0 rgba(133, 156, 228, 0.1); border: 1px solid #1B335B; box-shadow: 1px 1px 8px 1px #1B335B inset; float: left; font: 20px 'MuseoSans500',sans-serif; margin: 0; padding: 20px 30px; }
今天在逛http://nightly.mozilla.org/的时候,看到有内阴影效果,一看源代码居然box-shadow还有内阴影设置…… 兴奋又无奈啊。
来分析下box-shadow的参数吧
前参数是设置阴影的位置,第三个是设置阴影的模糊度,第四个是设置阴影的范围大小
第五个就是设置颜色(可以用rgba),最后一个是设置是不是内阴影,如不设置默认是外阴影
PS:阴影可以是多重的,多重间用“,”隔开!!
还有连背景色也能用rgba方式定义半透明效果了呢!
参考资料:
https://developer.mozilla.org/en/CSS/box-shadow