html用图片做阴影效果,CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

box-shadow属性的基本用法

使用Box-shadow制作逼真的图片阴影效果

使用伪元素::before和::after，我们能实现非常逼真的只有图片才能实现的阴影效果。

HTML:

.box11 {

width: 300px;

height: 100px;

background: #ccc;

border-radius: 10px;

margin: 10px;

}

.shadow {

position: relative;

max-width: 270px;

box-shadow: 0px 1px 4px rgba(0,0,0,0.3),

0px 0px 20px rgba(0,0,0,0.1) inset;

}

.shadow::before,

.shadow::after {

content:"";

position:absolute;

z-index:-1;

}

.shadow::before,

.shadow::after {

content:"";

position:absolute;

z-index:-1;

bottom:15px;

left:10px;

width:50%;

height:20%;

}

.shadow::before,

.shadow::after {

content:"";

position:absolute;

z-index:-1;

bottom:15px;

left:10px;

width:50%;

height:20%;

box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);

transform:rotate(-3deg);

}

.shadow::after{

right:10px;

left:auto;

transform:rotate(3deg);

}

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/3134.html