CSS 围绕形状勾勒轮廓

Question

我的 CSS 和 HTML 文件中有以下代码：

.test {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: inset 60px 0px white, inset 200px 0px blue;
}

<div class="test"></div>

这段代码生成的形状正是我想要的；但是，我不想要白色部分周围的蓝色轮廓 - 无论如何我可以删除它吗？

进一步说明：here is what the shape currently looks like on a white background, and here 是我希望的样子。

非常感谢所有帮助！

Answer 1

告诉我们您想实现的目标，以便我们知道如何帮助您实现它。这个小小的改变让蓝色轮廓消失了，让你看起来像日食

.test {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: inset 60px 0px white, inset 10px 0px blue;
}

Answer 2

也许是个技巧，在上面叠加一个 2px 的白色边框是可以接受的。

.test {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: inset 60px 0px 0px 0 white, inset 200px 0px 5px blue;
  position:relative;
}
.test:before{
  content:'';
  position:absolute;
  border-radius:50%;
  border:2px solid white;
  z-index:1;
  top:-1px;
  right:-1px;
  bottom:-1px;
  left:-1px;
  pointer-events:none;
}

<div class="test"></div>

CSS 围绕形状勾勒轮廓

CSS Outline Around Shapes

html

css

shape

box-shadow