web前端入门到实战：css3实现半圆和圆效果

最新推荐文章于 2023-07-17 08:51:54 发布

魔方编程

最新推荐文章于 2023-07-17 08:51:54 发布

阅读量1.9k

点赞数 1

文章标签： css 前端 web前端前端开发前端基础

本文链接：https://blog.csdn.net/wewfdf/article/details/102414181

版权

在css2中，如果需要失效一些圆角或者半圆等等效果，一般是要通过ps等软件来处理的，在CSS3中，则不需要了，只需要通过border-radius就可以实现，大大方便了开发的效率。

无论圆角、圆弧、实心圆、半圆，css3的实现代码都是 border-radius 属性，border-radius 不但可以定义圆半径和圆角大小，还可以画出各种方向的半圆。

代码

<!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：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

效果如下：

魔方编程

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
web前端入门到实战：css3实现半圆和圆效果

在css2中，如果需要失效一些圆角或者半圆等等效果，一般是要通过ps等软件来处理的，在CSS3中，则不需要了，只需要通过border-radius就可以实现，大大方便了开发的效率。无论圆角、圆弧、实心圆、半圆，css3的实现代码都是 border-radius 属性，border-radius 不但可以定义圆半径和圆角大小，还可以画出各种方向的半圆。代码<!DOCTYPE html&g...
复制链接

扫一扫