html - 如何在CSS中制作内部边框半径？

Question

如何使边框半径向内？

.circle {
   width:100px;
   height:100px;
   background-color:solid red;
   border-radius:-50px 50px -50px [enter image description here][1]50px;
 }

我知道 -50px 是 Not Acceptable ，但我只是举一个理论上的例子。
请参阅下图以供引用。

Answer 1

也许有一些径向渐变:

body {
 background:linear-gradient(pink,yellow);
 height:100vh;
 margin:0;
}

.box {
  width:150px;
  height:150px;
  margin:10px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  bottom:50%;
  left:0;
  right:0;
  background:radial-gradient(circle at top left,transparent 44%, red 44.5%);
}
.box:after {
  content:"";
  position:absolute;
  bottom:0;
  top:50%;
  left:0;
  right:0;
  background:radial-gradient(circle at bottom left,transparent 44%, red 44.5%);
}

<div class="box">
</div>