box-shadow实现镂空效果

最新推荐文章于 2024-05-28 12:36:33 发布

丸丸酱_wwj

最新推荐文章于 2024-05-28 12:36:33 发布

阅读量330

点赞数

分类专栏： css 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_38432842/article/details/126337351

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目中遇到需要实现镂空效果的样式，总结了几种实现方法

在这里插入图片描述

使用box-shadow实现实现思路：设定镂空元素大小，通过阴影实现镂空效果。

<div class="box1">
    <img src="./images/1.png" alt="" style="width: 100%;height: 100%;">
    <div class="shadow2"></div>
</div>
 <style>
.box1 {
    width:400px;
    height: 400px;
    position: relative;
    overflow: hidden;
}
.box1 .shadow2{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    width: 200px;
    height: 200px;
    opacity: .8;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.8);
}
 </style>