zoukankan      html  css  js  c++  java
  • css实现类似相框的阴影div的shadow效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>CSS在线-示例</title>
    <style type="text/css">
    .container {padding-left:10px;}
    .shadow {float:left;}
    .frame {position:relative; background:#fff; padding:10px; display:block;
    -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    }
    .clear {clear:left;}
    </style>
    <!--[if IE]>
    <style type="text/css">
    .container {padding-left:14px;}
    .frame {left:4px; top:4px;}
    .shadow {background:#000; margin:-4px -4px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');}
    </style>
    <![endif]-->
    </head>
    <body>
    <br />
    <div class="shadow">
    <img class="frame" src="/uploadfile/200905/19/1554522229.jpg" alt="" />
    </div>
    </div>
    <br class="clear" />
    <br />
    </div>
    </body>
    </html>
  • 相关阅读:
    简单对拍
    搜索感想
    L1434滑雪
    记忆化搜索
    L3956棋盘
    USACO 数字三角形
    枚举顺序
    蓝桥计算
    用户态和内核态IO过程
    Mybatis的结果集中的Do要不要有setter
  • 原文地址:https://www.cnblogs.com/CoolChen/p/2365210.html
Copyright © 2011-2022 走看看