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
}