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的濾鏡實現火焰效果

#

以上是css3做出半圓弧線的詳細內容。更多資訊請關注PHP中文網其他相關文章！