Javascript 如何从有阴影的div中切出一个圆
所以我有一个带方块阴影的div，值是“方块阴影：0.3px0 rgba（0,0,0,0.3）；”背景色是白色。 在左边你看不到有一个带图片的切圆，在圆和大div之间应该有透明的背景，我的意思是你应该看穿它 悬停时，截止圆将变成您可以看到的矩形。div左边的边框会改变它的半径。 我只是不能做到这一点，我想也许我可以把截取的大div形状作为svg，并将其用作背景图像，但这不会太好，因为在悬停状态下，我需要切换背景图像，当边框改变它的形状时，我不会有任何影响。Javascript 如何从有阴影的div中切出一个圆,javascript,html,css,frontend,Javascript,Html,Css,Frontend,所以我有一个带方块阴影的div，值是“方块阴影：0.3px0 rgba（0,0,0,0.3）；”背景色是白色。 在左边你看不到有一个带图片的切圆，在圆和大div之间应该有透明的背景，我的意思是你应该看穿它 悬停时，截止圆将变成您可以看到的矩形。div左边的边框会改变它的半径。 我只是不能做到这一点，我想也许我可以把截取的大div形状作为svg，并将其用作背景图像，但这不会太好，因为在悬停状态下，我需要切换背景图像，当边框改变它的形状时，我不会有任何影响。 如果您不喜欢SVG，我想您可以这样做，但
如果您不喜欢SVG，我想您可以这样做，但它希望真正透明：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.wrapper{
position: relative;
margin: 2em;
}
.box1{
position:relative;
height: 6em;
margin-left: 3em;
overflow: hidden;
background: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.box1:before{
content: ' ';
display: block;
position: absolute;
top: 0.5em;
left: -2.5em;
height: 5em;
width: 5em;
background: #fff;
box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
border-radius: 50%;
transition: all 0.5s;
}
.box1cover{
position: absolute;
left:0;
top:0.5em;
width: 3em;
height: 5em;
background: #fff;
}
.box2{
position: absolute;
top: 1em;
left: 1em;
height: 4em;
width: 4em;
background: #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.3);
border-radius: 50%;
transition: all 0.5s;
}
.wrapper:hover .box1:before, .wrapper:hover .box2{
border-radius: 30%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1"> </div>
<div class="box1cover"> </div>
<div class="box2"> </div>
</div>
</body>
</html>
.包装纸{
位置：相对位置；
边缘：2米；
}
.box1{
位置：相对位置；
身高：6em；
左边距：3em；
溢出：隐藏；
背景：#fff；
盒影：0.3pxRGBA（0,0,0,0.3）；
}
.box1:之前{
内容：''；
显示：块；
位置：绝对位置；
顶部：0.5em；
左：-2.5em；
身高：5公分；
宽度：5em；
背景：#fff；
盒影：插入0.3pxRGBA（0,0,0,0.3）；
边界半径：50%；
过渡：均为0.5s；
}
.box1cover{
位置：绝对位置；
左：0；
顶部：0.5em；
宽度：3em；
身高：5公分；
背景：#fff；
}
.box2{
位置：绝对位置；
顶部：1米；
左：1米；
高度：4em；
宽度：4em；
背景：#fff；
盒影：0.3pxRGBA（0,0,0,0.3）；
边界半径：50%；
过渡：均为0.5s；
}
.wrapper:hover.box1:before.wrapper:hover.box2{
边界半径：30%；
}