Question

所以我有一个div，它有一个border-radius和一个插入box-shadow，但是插图box-shadow似乎并没有延伸到div的边缘，并且导致原始div的模糊轮廓。

有没有办法让box-shadow一直延伸到整个div？

＆＃13;

div {
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  box-shadow: inset 0px 0px 0px 10px white
}

＆＃13;

<div></div>

＆＃13;

（到目前为止，我在Chrome和IE10中检测到这种情况的浏览器）

Answer 1

只有简单的边框和box-sizing:border-box，你才能实现同样的目标吗？

＆＃13;

div {
  box-sizing:border-box;
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  border:10px solid white;
  cursor:pointer;


}

＆＃13;

<div></div>

＆＃13;

Answer 2

您可以使用border代替box-shadow。但由于box-shadow为inset，border无法设置为元素，但::before伪元素可以解决问题：

div {
  height: 100px;
  width: 100px;
  position: relative;
}
div:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
  z-index: -1;
  border-radius: 50%;
  border: 10px solid white;
  background-color: red;
}

body {
  background: yellow;
}
#fixed {
  height: 100px;
  width: 100px;
  position: relative;
}
#fixed:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left:0;
  z-index: -1;
  border-radius: 50%;
  border: 10px solid white;
  background-color: red;
}
#problem{
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 50%;
  box-shadow: inset 0px 0px 0px 10px white;
}

<div id="fixed">Foo bar baz</div>
<div id="problem">Foo bar baz</div>

如何在使用插入框阴影和边框半径时删除轮廓

2 个答案: