前端开发您现在的位置是:首页 > 博客日志 > 前端开发

使用CSS样式划一个半圆

<a href='mailto:'>微wx笑</a>的头像微wx笑 2022-03-18前端开发 1 0关键字:   

html<div class="div_circle"样式:.div_circle { width:400px; height:100px; border:1px solid color:#f5f8fa}.div_circle:before { content: &#39;&#39;; positi


C04无知

htmlC04无知

<div class="div_circle"


C04无知

样式:C04无知

.div_circle {
  width:400px;
  height:100px;
  border:1px solid color:#f5f8fa
}
.div_circle:before {
    content: '';
    position: absolute;
    width: 
36px
;
    height: 
12px
;
    border: 
1px
 solid #2e6da4;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: 
1px
 solid #f5f8fa;
    top: 
-5px
;
    background: #fff;
    left: 
11px
;
}

效果:C04无知

image.pngC04无知

本文由 微wx笑 创作,采用 署名-非商业性使用-相同方式共享 4.0 许可协议,转载请附上原文出处链接及本声明。
原文链接:https://www.ivu4e.com/blog/front/2022-03-18/1098.html

很赞哦! () 有话说 ()

相关文章