css3做出半圓弧線

這次給大家帶來css3做出半圓弧線，css3做出半圓弧線的注意事項有哪些，下面就是實戰案例，一起來看一下。

本文介紹了css3實現畫半圓弧線的範例程式碼，分享給大家，具體如下：

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代碼

<ul>    <li><p class="circle1"></p></li>    <li><p class="circle2"></p></li>    <li><p class="circle3"></p></li>    <li><p class="circle4"></p></li></ul>

效果如下：

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

CSS3的滑鼠移入圖片動態提示效果

css中sticker-footer布局如何使用

CSS的濾鏡實現火焰效果