html圆形头像带阴影,美化图片: CSS3 给图片加圆角和阴影实例

css3时代, 美化图片不再那么麻烦, 图片圆角效果, 加个阴影, 只要几行代码搞定, css3给美工生了不少的时间, 省时省力老修花一段时间做了这个css3图片阴影和圆角的效果仅供参考, 当下并不是所有的浏览器都支持这这个效果, 但xp已判死刑, win7下IE9内核已是不可挡.

原图设定宽度是300px

css3给图片加个圆角: style="border-top-left-radius:150px;"

css3设置2个圆角效果: style="border-top-left-radius:150px;border-top-right-radius:150px;"

图片4个圆角: style="border-radius:100px;"

圆角值大于边长的一半直接变成圆形(椭圆形): style="border-radius:200px;"

用css3给图片加个阴影: style="box-shadow:0 0 10px #333;"

图片加个没虚化的阴影: style="box-shadow:30px 15px 0 #333;"

css3粗大阴影和圆角效果: style="border-radius:100px;box-shadow:10px 20px 30px 40px #ff0;;"

参数说明:10px是阴影在x轴的距离, 20px是阴影在y轴的距离, 30px是阴影虚化范围, 40px是阴影的浓度