css如何画半圆弧中间低

html-css017

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

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

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

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

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

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

div{

display: inline-block

border:1px solid #6baabb

width:40px

height:40px

float:left

margin:0px 10px

}

a{

display: inline-block

width:40px

height:40px

background: #6baabb

}

.Round{/*圆*/

border-radius:20px

}

.LeftRound{/*左半圆*/

width:20px

border-radius:20px 0px 0px 20px

}

.RightRound{/*右半圆*/

width:20px

border-radius:0px 20px 20px 0px

}

.TopRound{/*上半圆*/

height:20px

border-radius:20px 20px 0px 0px

}

.BottomRound{/*下半圆*/

height:20px

border-radius:0px 0px 20px 20px

}

<div><a class="Round"></a></div> 全圆

<div><a class="LeftRound"></a></div> 左半圆

<div><a class="RightRound"></a></div> 右半圆

<div><a class="TopRound"></a></div> 上半圆

<div><a class="BottomRound"></a></div> 下半圆

<div style="border:1px solid #e6e6e6width:50pxheight:25pxborder-top-right-radius: 25pxborder-top-left-radius: 25pxborder-bottom:0">

</div>