CSS3下实现边框阴影效果(下)-翘边阴影效果

本文详细介绍了如何使用CSS3来创建翘边阴影效果。通过定义特定样式,结合伪元素选择器`before`和`after`,以及利用`transform: scale`属性生成平行四边形,最终实现在图片周围产生透明边框内的翘边阴影。教程中还提醒注意浏览器内核的兼容性问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

接着我们来实现翘边阴影效果

.box{
    width: 980px;
    height: auto;
    overflow: hidden;
    margin: 20px auto;
}
.box li{
    width: 300px;
    height:210px ;
    float: left;
    margin: 20px 10px;
    border: solid 2px #efefef;
    background: #ffffff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
    -ms-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 5px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
}
.box li img{
    display: block;
    width: 290px;
    height: 200px;
    margin: 5px;
}
  • 通过定义上述样式,我们可以看到图片周围生成了一个宽为2px的透明边框,并且向内生成了淡淡的阴影效果,接着和生成曲线阴影效果一样,我们使用before和after这两个伪元素选择器生成阴影图形并将其覆盖在主图形下面,因此我们需要在li样式内添加position属性的定义:
position:relative;
  • 我们先来定义插入在主图形前的图像,为了生成翘边,我们需要生成一个平行四边形或者
.box li:before{
    content: '';
    position: absolute;
    width: 90%;
    height: 80%;
    left: 20px;
    bottom: 8px;
    background: #f60;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -ms-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    transform: skew(-12deg) rotate(-4deg);
    -o-transform: skew(-12deg) rotate(-4deg);
    -webkit-transform: skew(-12deg) rotate(-4deg);
    -moz-transform: skew(-12deg) rotate(-4deg);
    -ms-transform: skew(-12deg) rotate(-4deg);   
}
  • 为了方便观察,我们可以将background设置为#f60,在这里width和height这两个属性决不能设置得等同于主图像的宽高,因为这样生成的平行四边形宽高有可能大于主图形,所以我们将这两个属性设置得稍小一掉,使其保证内在住图像之内;此外,为了生成平行四边形,我们使用到了transform:scale,这个属性,使用的同时需要注意到浏览器内核兼容性问题,这里不赘述
  • 最后将新生成的图像隐藏在住图像之下,将background的属性值改会transparent,设置z-index的属性:
.box li:before{
    background:transparent;
    z-index:-1;
}
  • 修改完后,我们便可以看到一边的翘边的阴影效果,我们可以在主图像后插入另一个图形,实现另一边的翘边效果:
.box li:after{
    content: '';
    position: absolute;
    width: 90%;
    height: 80%;
    right: 20px;
    bottom: 8px;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -ms-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    ttransform: skew(12deg) rotate(4deg);
    -o-transform: skew(12deg) rotate(4deg);
    -webkit-transform: skew(12deg) rotate(4deg);
    -moz-transform: skew(12deg) rotate(4deg);
    -ms-transform: skew(12deg) rotate(4deg);
    z-index: -2;
}

到这里我们就制作完了曲线和翘边的阴影效果,感谢各位小伙伴来观!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值