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>
  • 相关阅读:
    POJ 2752 KMP中next数组的理解
    KMP详解
    HDU 3221 矩阵快速幂+欧拉函数+降幂公式降幂
    POJ 3220 位运算+搜索
    反素数深度分析
    POJ 2886 线段树单点更新
    求反素数的方法
    CV第八课 GPU/CPU
    49. 字母异位词分组
    48. 旋转图像
  • 原文地址:https://www.cnblogs.com/CoolChen/p/2365210.html
Copyright © 2011-2022 走看看