纯CSS实现网站图片圆角和阴影效果

Thursday, Mar 5, 2020 | 1 minute read | Updated at Thursday, Mar 5, 2020

@

纯CSS实现网站图片圆角和阴影效果

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声明

比如只需要文章图片实现阴影和圆角效果

.content  img {box-shadow: 10px 10px 10px rgba(0,0,0,.5);border-radius:5%;}

基本上主流的新版桌面和手机浏览器都支持图片圆角和阴影,上图测试,效果如下

© 2018 - 2026 vpslala

🌱 Powered by Hugo with theme Dream.