溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

web前端入門(mén)到實(shí)戰(zhàn)：css3實(shí)現(xiàn)半圓和圓效果

發(fā)布時(shí)間：2020-08-25 22:15:21 來(lái)源：網(wǎng)絡(luò) 閱讀：253 作者：前端向南 欄目：web開(kāi)發(fā)

在css2中，如果需要失效一些圓角或者半圓等等效果，一般是要通過(guò)ps等軟件來(lái)處理的，在CSS3中，則不需要了，只需要通過(guò)border-radius就可以實(shí)現(xiàn)，大大方便了開(kāi)發(fā)的效率。

無(wú)論圓角、圓弧、實(shí)心圓、半圓，css3的實(shí)現(xiàn)代碼都是 border-radius 屬性，border-radius 不但可以定義圓半徑和圓角大小，還可以畫(huà)出各種方向的半圓。

代碼

<!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前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻

效果如下：

web前端入門(mén)到實(shí)戰(zhàn)：css3實(shí)現(xiàn)半圓和圓效果

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手