鍍金池/ 問答/HTML5  HTML/ CSS半圓邊框樣式求指教，不用圖片實(shí)現(xiàn)

CSS半圓邊框樣式求指教，不用圖片實(shí)現(xiàn)

圖片描述

由于要做響應(yīng)式處理所以不能用圖片，求CSS高手指教下這種突起半圓、該如何實(shí)現(xiàn)呀？

回答
編輯回答
逗婦乳

border-radius: 100px 100px 0 0;
height: 50px;
background-color: #fff;
border: 3px solid #999;

2017年7月24日 10:29
編輯回答
情皺

利用偽類加一個(gè)絕對(duì)定位的半圓遮罩顯示在當(dāng)前位置。

2017年10月12日 19:36
編輯回答
陌如玉
.test{
  width:100px;
  height:50px; 
  background-color:#fff;
  border-radius:50px 50px 0 0; 
  border:2px solid #666;
  border-bottom:none;
}
<div class="test"></div>
2017年3月25日 19:27