边框半径和框阴影错误

Question

我有一个带有这个 styles 的 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;
}

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