形状周围的CSS大纲

时间:2017-06-11 01:04:09

标签: html css shape box-shadow

我的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是白色背景上目前的形状,here是我希望它的外观。

非常感谢所有帮助!

2 个答案:

答案 0 :(得分:1)

也许一个技巧,在它上面覆盖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>

答案 1 :(得分:0)

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

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