【CSS】CSS半圆边框样式求指教，不用图片实现

• Z时代
• 2024-01-10
• 分类：技术分享

由于要做响应式处理所以不能用图片，求CSS高手指教下这种突起半圆、该如何实现呀？

回答：

.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>

回答：

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

回答：

利用伪类加一个绝对定位的半圆遮罩显示在当前位置。

以上是 【CSS】CSS半圆边框样式求指教，不用图片实现 的全部内容， 来源链接： utcz.com/a/154429.html