搜索 用户中心
  • 欢迎光临三九网站目录 , 快审50元/站,快审请联系站长QQ:704918986
    当前位置 首页 > 教程收藏 > CSS教程
    美化图片: CSS3 给图片加圆角和阴影实例
        发布时间:2015-11-05 21:53:43    发布作者:admin

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

    dHU三九网站目录

    原图设定宽度是300pxdHU三九网站目录

    dHU三九网站目录

    css3给图片加个圆角: style="border-top-left-radius:150px;"dHU三九网站目录

    dHU三九网站目录

    css3设置2个圆角效果: style="border-top-left-radius:150px;border-top-right-radius:150px;"dHU三九网站目录

    dHU三九网站目录

    图片4个圆角: style="border-radius:100px;"dHU三九网站目录

    dHU三九网站目录

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

    dHU三九网站目录

    用css3给图片加个阴影: style="box-shadow:0 0 10px #333;"dHU三九网站目录

    dHU三九网站目录

    dHU三九网站目录

    图片加个没虚化的阴影: style="box-shadow:30px 15px 0 #333;"dHU三九网站目录

    dHU三九网站目录


    dHU三九网站目录


    dHU三九网站目录

    css3粗大阴影和圆角效果: style="border-radius:100px;box-shadow:10px 20px 30px 40px #ff0;;" 
    参数说明:10px是阴影在x轴的距离, 20px是阴影在y轴的距离, 30px是阴影虚化范围, 40px是阴影的浓度dHU三九网站目录


    dHU三九网站目录

    最新资讯
    最新收录
    热门资讯