css如何画半圆弧中间低

html-css011

css如何画半圆弧中间低,第1张

1、在电脑上打开Css,然后准备一个空的html结构,在其中放置一个空的div。

2、这时需要去除浏览器中一些特有的样式。

3、给这个样式一个宽高,并添加一个背景。

4、最后给样式添加border-radius属性,其值为宽或高的一半。

5、最后运行程序,这样就会在界面中看到一个圆形。

这边的设置圆圈颜色,有点歧义.

1.类似圆环的形式;2.半圆填充颜色

对于第一种那就简单了:

div{

 width: 200px

 height:200px

 border-radius: 50%

 border: 10px solid #1AA1E1

display: inline-block

box-sizing: border-box

}

第二种半圆的话,那么会相对麻烦点(当然图片的方法就不说了):

div{

width: 200px

height:200px

border-radius: 50%

position: relative

display: inline-block

box-sizing: border-box

overflow: hidden

border:1px solid #e3e3e3

}

div:after{

content: ''

position: absolute

width: 50%

height: 100%

background-color: #0000FF

top:0

left:0

}