border-radiusにより発生した隙間を埋めたい

html
1<div></div>

css
1div {
2  width: 200px;
3  height: 200px;
4  border-radius: 50%;
5  border: 60px solid #000;
6  box-shadow:
7    0px 0px 0px 17px #000000,
8    0px 0px 50px 50px #000000 inset;
9  margin: 50px auto;
10}

Chromeで表示させると、borderと外側のborder-radiusの間、およびborder-radiusの外側と内側の間に白い線が出てしまいます。
これはどのように改善すればいいのでしょうか？

yoshinavi

2018/12/15 23:45

背景が薄く表示される現象は、border-radiusのバグではないのでしょうが、今後改善されるべき挙動だと思いますので、現状では、この組み合わせをしない方向でデザインされるのが良いかと思います。

行動規範の内容に同意します

回答2件

これでも改善できました

css
1div {  
2  width: 200px;
3  height: 200px;
4  border-radius: 50%;
5  box-shadow: 0px 0px 0px 150vmax #000;
6  position: relative;
7}
8div {
9  content: '';
10  display: block;
11  width: 202px;
12  height: 202px;
13  border-radius: 50%;
14  box-shadow: 0px 0px 40px 23px #000 inset;
15  position: absolute;
16  top: -1px;
17  left: -1px;
18}

投稿2018/12/16 08:19

ryoo_chksl

総合スコア69

ベストアンサー

Chromeは元々描画がきれいではない印象なので、たまにこういう事が起こりますね。（CSSアニメーションも一番ぎこちないかも）

構成を変えずに無理やり。

CSS
1div {
2  width: 200px;
3  height: 200px;
4  border-radius: 50%;
5  border: 60px solid #000;
6  box-shadow:
7    0px 0px 0px .1px #000000, /**/
8    0px 0px 0px .1px #000000, /**/
9    0px 0px 0px .1px #000000, /**/
10    0px 0px 0px .1px #000000, /**/
11    0px 0px 0px .1px #000000, /**/
12    0px 0px 0px 17px #000000,
13    0px 0px 50px 50px #000000 inset;
14  margin: 50px auto;
15  background-image: radial-gradient(circle farthest-side,rgba(0,0,0,0) 85px,#000 85px); /**/
16}
17```**動くサンプル：**[https://jsfiddle.net/8umdrg39/](https://jsfiddle.net/8umdrg39/)
18
19---
20
21borderをやめてbox-shadowで線を描く。（insetと外側の境界はbackgroundで処理）
22```CSS
23div {
24  width: 200px;
25  height: 200px;
26  border-radius: 50%;
27  /*border: 60px solid #000;*/
28  box-shadow:
29    0px 0px 0px 60px #000000,
30    0px 0px 0px 77px #000000,
31    0px 0px 50px 50px #000000 inset;
32  margin: 50px auto;
33  background-image: radial-gradient(circle farthest-side,rgba(0,0,0,0) 85px,#000 85px); /**/
34}
35```**動くサンプル：**[https://jsfiddle.net/8umdrg39/1/](https://jsfiddle.net/8umdrg39/1/)
36
37---
38
39border, box-shadowをやめてradial-gradientで線を描く。（あまりうまくいかなかったが、要件によってはこれで行けることもあるかも）
40```CSS
41div {
42  width: 354px;
43  height: 354px;
44  border-radius: 50%;
45  /*border: 60px solid #000;*/
46  /*box-shadow:
47    0px 0px 0px 17px #000000,
48    0px 0px 50px 50px #000000 inset;*/
49  margin: 50px auto;
50  background-image: radial-gradient(circle farthest-side,rgba(0,0,0,.05) 30px,#000 80px);
51}
52```**動くサンプル：**[https://jsfiddle.net/8umdrg39/2/](https://jsfiddle.net/8umdrg39/2/)