巧用CSS3属性作为CSS hack实例页面

展示

回到相关文章 »

代码

CSS代码：
.box{width:32%; margin:1em auto; text-align:center;}

.rad,.rad_in{background:url(/study/image/rad_bg.png) no-repeat; background:rgba(0,0,0,0);}
.rad{border:1px solid rgba(204, 204, 204, 1); border-radius:6px; box-shadow:0 0 4px rgba(0,0,0,.2); background-position:right -300px;}
.rad_in{border:1px solid rgba(255, 255, 255, 1); border-radius:6px; box-shadow:inset 0 0 20px rgba(0,0,0,.1);}

.img{padding:3.2em 0;}
HTML代码：
<div class="box rad">
    <div class="rad_in">
        <img class="img" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
    </div>
</div>