這次給大家?guī)?lái)css3做出半圓弧線(xiàn)，css3做出半圓弧線(xiàn)的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

本文介紹了css3實(shí)現(xiàn)畫(huà)半圓弧線(xiàn)的示例代碼，分享給大家，具體如下：

css代碼.circle1 {

width: 100px;

height: 200px;

border: 1px solid black;

border-radius: 100% 0 0 100%/50%;

border-right: none;

}

.circle2 {

width: 200px;

height: 100px;

border: 1px solid black;

border-radius: 50% 50% 0 0/100% 100% 0 0;

border-bottom: none;

}

.circle3 {

width: 100px;

height: 200px;

border: 1px solid black;

border-radius: 0 100% 100% 0/50%;

border-left: none;

}

.circle4 {

width: 200px;

height: 100px;

border: 1px solid black;

border-radius: 0 0 50% 50%/0 0 100% 100% ;

border-top: none;

}

html代碼

效果如下：

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

總結(jié)

以上是生活随笔為你收集整理的html怎么做半圆形按钮,css3做出半圆弧线的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。