纯CSS实现网站图片圆角和阴影效果
纯CSS实现网站图片圆角和阴影效果
1
box-shadow: 10px 10px 10px rgba(0,0,0,.5);-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);border-radius:5%
注意上下层关系,可以单独写一个CSS声明
比如只需要文章图片实现阴影和圆角效果
1
.content img {box-shadow: 10px 10px 10px rgba(0,0,0,.5);border-radius:5%;}
基本上主流的新版桌面和手机浏览器都支持图片圆角和阴影,上图测试,效果如下