web前端入門到實戰：css3實現半圓和圓效果

時間 2019-12-22

標籤 web 前端入門實戰 css3 css 實現半圓效果欄目 HTML 简体版

原文原文鏈接

在css2中，若是須要失效一些圓角或者半圓等等效果，通常是要經過ps等軟件來處理的，在CSS3中，則不須要了，只須要經過border-radius就能夠實現，大大方便了開發的效率。css

不管圓角、圓弧、實心圓、半圓，css3的實現代碼都是 border-radius 屬性，border-radius 不但能夠定義圓半徑和圓角大小，還能夠畫出各類方向的半圓。html

代碼前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3</title>
    <style>
        *{margin:0;padding:0;}
        ul li{list-style:none;float:left;margin-left:20px;margin-top:50px;text-align:center;}
        li{background:red;}
         .circle1{width:100px;height:50px;border-radius:50px 50px 0 0;line-height:50px;}
         .circle3{width:100px;height:50px;border-radius:0 0 50px 50px;line-height:50px;}
         .circle2{width:50px;height:100px;border-radius:0 50px 50px 0;line-height:100px;}
         .circle4{width:50px;height:100px;border-radius: 50px 0 0 50px;line-height:100px;}
         .circle5{width:100px;height:100px;border-radius: 50px;line-height:100px;}
    </style>
</head>
<body>
    <ul>
        <li class="circle1">上邊圓</li>
        <li class="circle2">左邊圓</li>
        <li class="circle3">下邊圓</li>
        <li class="circle4">左邊圓</li>
        <li class="circle5">全圓</li>
    </ul>
</body>
</html>
web前端開發學習Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻

效果以下：css3