使用负半径的 div 使阴影看起来正确

Posted 2023-02-24

【中文标题】使用负半径的 div 使阴影看起来正确

【英文标题】：Make shadow looks correct with div with negaitve radius

【发布时间】：2018-04-10 08:26:50

【问题描述】：

如何使用 css 在图像上绘制具有如此负半径的 div，我的问题的重点是如何在这个圆形区域使用阴影？我尝试对 ::before,::after 元素使用一些技巧，它适用于负半径，但是当我尝试对这个元素使用阴影时，它看起来不正确，因为这个 div 的所有正方形都开始可见。

enter image description here

.side-menu__corner 
  width: 12px;
  height: 12px;
  background: blue;
  position: relative;
  overflow: hidden;



.side-menu__corner:before 
  content: "";
  display: block;
  background: white;
  position: absolute;
  bottom: -9px;
  left: -9px;
  width: 20px;
  height: 20px;
  border-radius: 20px;

<div class="side-menu__corner">
</div>

【参考方案1】：

您可以像这样使用带有径向渐变的阴影滤镜：

.box 
   width:200px;
   height:200px;
   margin:50px;
   background:radial-gradient(circle at bottom left,transparent 70%,blue 71%);
   filter:drop-shadow(0px 0px 11px #000);

<div class="box">

</div>