css3 圆角和阴影

来源:互联网 发布:activiti工作流源码 编辑:程序博客网 时间:2024/06/06 18:34

图片显示圆角,带阴影

css: 

  .p_pic{

    max-height: 40px;
    width: auto;
    box-shadow: 0 0 5px #333;
    border-radius: 3px;

}

html: <img class='p_pic' src="a.png">


相关实例,转自网络内容:

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是阴影的浓度

CSS3 box-shadow 属性支持的浏览器

css3 boder-radiu支持的浏览器


0 0
原创粉丝点击