边界半径和框阴影错误

Question

我有一个具有这种样式的 div：

.example {
  margin: 200px;
  width: 200px;
  height: 200px;
  border-radius: 20px;
  box-shadow: white 0px 0px 0pt 8pt, #033354 0px 0px 0pt 11pt;
}

<div class="example">
</div>

结果是这样的：

有什么办法可以避免那些小线条吗？

Answer 1

将 background-color 添加为 white 将解决该问题。

.example {
  margin: 200px;
  width: 200px;
  height: 200px;
  border-radius: 20px;
  box-shadow: white 0px 0px 0pt 8pt, #033354 0px 0px 0pt 11pt;
  background-color: white;
}

<div class="example">
</div>

Answer 2

我不知道你真正需要什么，但如果你需要一个圆形框架，这是我的解决方案：

.example{
  margin: 200px;
  width: 200px;
  height: 200px;
  border-radius: 20px;
  position: relative;
}

.example:before {
    display: block;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border: 3px solid #000;
    position: absolute;
    box-sizing: border-box;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    content: '';
    pointer-events: none;
}

我使用了一个 :before 伪元素作为框架（与元素本身有一定距离）。框架适应 .example 元素的大小并且不会对鼠标事件做出反应，因此您可以单击 .example 中的任何内容:)