• 为图片添加阴影效果css3(boxshadow)


    可在该网站调整阴影样式:

    http://www.wordpressthemeshock.com/css-drop-shadow/

    代码会在你调整之后出现,所以就勤快点多动动它吧!

    我的测试页代码为:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片阴影</title>
    </head>
    <style type="text/css">
    .class_box_shadow{
        555px;
        min- 270px;
        min-height: 130px;
        margin: auto;
        background: #ccc;
        border: 5px solid white;
        position:relative;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
        -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
    }
    .sh_bottom{
        100%; height: 45%;
        position:absolute;
        z-index: -2;
        bottom: 0; right: 0;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 10px 2px rgba(0, 0, 0, 0.2);
    }
    .sh_bottom:after{
        content: "";
        position:absolute;
        right: 0; bottom:0;
        150px; height: 100px;
        z-index: -1;
        background: rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 20px 30px 8px rgba(0, 0, 0, 0.35);
        -webkit-box-shadow: 20px 30px 8px rgba(0, 0, 0, 0.35);
        box-shadow: 20px 30px 8px rgba(0, 0, 0, 0.35);
        -moz-transform:skew(10deg,10deg) translate(-40px,-15px);
        -webkit-transform:skew(10deg,10deg) translate(-40px,-15px);
        transform:skew(10deg,10deg) translate(-40px,-15px);
    }
    .sh_bottom:before{
        content: "";
        position:absolute;
        left: 0; bottom:0;
        150px; height: 100px;
        z-index: -1;
        background: rgba(0, 0, 0, 0.2);
        -moz-box-shadow: -20px 30px 8px rgba(0, 0, 0, 0.35);
        -webkit-box-shadow: -20px 30px 8px rgba(0, 0, 0, 0.35);
        box-shadow: -20px 30px 8px rgba(0, 0, 0, 0.35);
        -webkit-transform:skew(-10deg,-10deg) translate(40px,-15px);
        -moz-transform:skew(-10deg,-10deg) translate(40px,-15px);
        transform:skew(-10deg,-10deg) translate(40px,-15px);
    }
    </style>
    <body>


    <div class="class_box_shadow"><img src="../web/images/002.jpg" /><div class="sh_bottom"></div></div>


    </body>
    </html>
    图片效果(在IE浏览器里看不到理想的效果,所以记得要hack一下,火狐和谷歌都没有问题):

    效果还不错吧!!!

  • 相关阅读:
    web项目优化
    mysql 优化笔记
    Java 调用 google 翻译
    Git回滚merge操作
    mybatis 批量插入 返回主键id
    idea tomcat debug 失效
    mysql 常用语句
    xstream 解析xml报文
    activeMQ 讲解及实战
    linux svn apache
  • 原文地址:https://www.cnblogs.com/jessiecaisme/p/2662017.html
Copyright © 2020-2023  润新知