css3实现的图片边框阴影特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3实现的图片边框阴影特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gb2312" />
    <title>css3ʵ�ֵ�ͼƬ�߿���Ӱ��Ч</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
    <div id="wrapper">
        <h2>css3ʵ�ֵ�ͼƬ�߿���Ӱ��Ч</h2>
        <div class="photo">
            <img src="images/bag.jpg" alt="Bag">
        </div>
    </div> <!-- END Wrapper -->
</body>
</html>

CSS代码(style.css):

/*Tutorial:Onextrapixel.com*/
body{background:#EDEFF4;font-family:'Anton',sans-serif;text-shadow:0 1px #fff;}
#wrapper{margin:30px auto;width:600px;}
.photo{margin:30px auto;display:block;height:401px;width:602px;-webkit-box-shadow:0 2px 10px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.5);-moz-box-shadow:0 2px 10px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.5);-o-box-shadow:0 2px 10px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.5);box-shadow:0 2px 10px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.5);position:relative;}
.photo img{width:100%;}
.photo:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,.15)),to(rgba(0,0,0,.25))),-webkit-gradient(linear,left top,right bottom,color-stop(0,rgba(255,255,255,0)),color-stop(0.5,rgba(255,255,255,.1)),color-stop(0.501,rgba(255,255,255,0)),color-stop(1,rgba(255,255,255,0)));background:-moz-linear-gradient(top,rgba(255,255,255,.15),rgba(0,0,0,.25)),-moz-linear-gradient(left top,rgba(255,255,255,0),rgba(255,255,255,.1) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,0));background:linear-gradient(top,rgba(255,255,255,.15),rgba(0,0,0,.25)),linear-gradient(left top,rgba(255,255,255,0),rgba(255,255,255,.1) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,0));}
h1{font-weight:700;font-size:50px;text-align:center;}
h2{font-weight:400;font-size:25px;text-align:center;}

附件:下载该文件资源,减少时间成本(增值服务)