我期待實現與CSS的元素在這些方面：圓邊
這是我所得到的最接近（需要在邊界）：
div {
width: 120px;
height: 100px;
margin: 25px auto;
border: 1px solid #000;
border-top-left-radius: 200px 300%;
border-bottom-left-radius: 200px 300%;
border-top-right-radius: 200px 300%;
border-bottom-right-radius: 200px 300%;
}<div></div>關於如何銳化邊緣的任何建議？寬度需要變化。
你可以做到這一點與僞元素，這樣，它會擴展到什麼都大小，你的主要元素
更新
typ2上設置有半徑相等的左/右彎曲如果要用顏色，圖像或動態可伸縮高度填充這些邊框，則需要額外的內部元素。
.typ1 div {
position: relative;
display: inline-block;
width: 120px;
height: 100px;
margin: 0 30px;
overflow: hidden;
}
.typ1 div + div {
width: 200px;
height: 100px;
}
.typ1 div::before,
.typ1 div::after {
left: 0;
top: -10%;
width: 100%;
height: 120%;
border-radius: 100%;
border: 1px solid #000;
}
.typ1 div::after {
left: 22%;
top: 0;
width: 56%;
height: 100%;
border-radius: 0;
border-width: 1px 0;
}
.typ2 div {
position: relative;
display: inline-block;
width: 74px;
height: 100px;
margin: 5px 52px;
border: 1px solid #000;
border-width: 1px 0;
}
.typ2 div + div {
width: 156px;
}
.typ2 div::before,
.typ2 div::after {
left: -24px;
top: -25%;
width: 188px;
height: 150%;
border-radius: 100%;
border: 1px solid transparent;
border-left: 1px solid #000;
}
.typ2 div::after {
left: auto;
right: -24px;
border-left: none;
border-right: 1px solid #000;
}
/* general styling */
div::before, div::after {
content: '';
position: absolute;
box-sizing: border-box;
}<div class="typ1">
<div></div>
<div></div>
</div>
<div class="typ2">
<div></div>
<div></div>
</div>如果你知道你想要的形狀的大小，你可以使用wrapper div和overflow：hidden來解決這個問題。
我使用flexbox居中，但您可以使用其他方式垂直居中。
.wrapper {
display: flex;
align-items: center;
height: 100px;
overflow: hidden;
}
.circle {
width: 120px;
height: 120px;
margin: 25px auto;
background-color: black;
border-radius: 100%;
}<div class="wrapper">
<div class="circle"></div>
</div>你可以做這樣的事情與定位和兩個子元素：
.circle {
position: relative;
width: 100px;
height: 100px;
margin: 25px auto;
border-radius: 50%;
background: #000;
}
.circle > .inner-top,
.circle > .inner-bottom {
position: absolute;
left: 0;
width: 100px;
height: 25px;
background: #fff;
}
.circle > .inner-top {
top: -17px;
}
.circle > .inner-bottom {
bottom: -17px;
}<div class="circle">
<div class="inner-top"></div>
<div class="inner-bottom"></div>
</div>調整top和的值按照您的意願設置inner divs的屬性。
請仔細閱讀並在我的答案發表評論，讓我知道，如果事情是不明確或缺少。如果你能接受最能幫助你的答案，那也將是一件好事。 – LGSon