CSS3下实现边框阴影效果（下）-翘边阴影效果

最新推荐文章于 2024-07-28 21:58:30 发布

Simagle

最新推荐文章于 2024-07-28 21:58:30 发布

阅读量5.8k

点赞数

分类专栏： CSS效果

本文链接：https://blog.csdn.net/Simagle/article/details/46711717

版权

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

摘要由CSDN通过智能技术生成

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

.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