如何制作div的倒轉曲線或邊界半徑

Question

我一直在進行一個項目，在這個項目中我必須設置div倒置邊框的樣式以實現此目的，我只能使用CSS和JS，而不能使用任何插件。 我遍歷了幾篇在線帖子和類似的外觀問題，但是找不到真正想要的東西，我附上了 供參考，以及一個小提琴什么，我至今嘗試過。

 .outer { overflow: hidden; } .inner { border: 1px solid #888; } .inner i { width: 40px; height: 40px; border: 1px solid #888; border-radius: 50%; background-color: #fff; } .inner .top { margin-top: -20px; } .inner .bottom { margin-top: -20px; margin-bottom: -22px; } .inner .left { float: left; margin-left: -20px; } .inner .right { float: right; margin-right: -20px; } .content { min-height: 80px; } 

 <div class="outer"> <div class="inner"> <i class="top left"></i> <i class="top right"></i> <div class="content"></div> <i class="bottom right"></i> <i class="bottom left"></i> </div> </div> 

Answer 1

肯定會幫到你

演示： http ： //jsfiddle.net/mxehp3sh/2/

的HTML

   <div id="a" class="circle-border">B</div>

的CSS

    body{background:yellow;}
  .circle-border {margin:10px;
  display: inline-block;    
position: relative;    
height: 100px;
text-align: center;
line-height: 100px;
vertical-align: middle;
 }

 #a {
width: 90%;
border-left: none;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
background-image: -moz-radial-gradient(
    100% 50%,
    circle closest-corner, 
    transparent 0,
    transparent 55px, 
    transparent  56px, 
    grey 57px 
);
background-image: -webkit-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
background-image: -ms-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
background-image: -o-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
background-image: radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent  56px, grey 57px);
}