使用border-radius画圆、半圆、扇形_border-radius半圆-CSDN博客

本文链接：https://blog.csdn.net/LuLiangJun001/article/details/105877295

本文介绍了如何使用CSS的border-radius属性来创建圆形、半圆形和扇形效果。内容详细阐述了border-radius的不同数值表示方法，包括px、%、em单位，并通过实例展示了设置不同半径值来实现四种不同的形状。最后，文中给出了具体的效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用border-radius画圆、半圆、扇形

！！！注意：ie9以下的浏览器是不支持 border-radius属性的

border-radius的数值有三种表式方法：px、%、em。这里说明一下 em是倍数 1em=16px

border-radius可以设置水平和垂直方向的半径border-radius:10px/20px 如果省略垂直方向的半径，则默认与水平半径相等border-radius:10px 等效于border-radius:10px/10px

border-radius的多值书写：

一个值时：border-radius:10px：表示四个角的半径
两个值时：border-radis:10px 20px：10表示左上右下的角，20表示右上左下的角
三个值时：border-radius:10px 20px 30px：10表示左上角，20表示右上左下的角，30表示右下角
四个值时：border-radius:10px 20px 30px 40px：10表示左上，20表示右上，30表示右下，40表示左下（顺时针）

了解前面的知识后，开始动手完成本文目标

<head>
<style>
     div{
         margin:50px;
         display:inline-block;
         width:100px;
		 height:100px;
         border:3px solid red;
     	}
<style>
</head>
<body>
	<div></div>
    <div id='circle'></div>
    <div id='half-circle'></div>
    <div id='sector'></div>
</body>

效果如下：
在这里插入图片描述
现在把第二个画成圆

#circle{
            border-radius: 50%;
        }

效果如下:
在这里插入图片描述
现在把第三个画成半圆

#half-circle{
            border-radius:50px 50px 0px 0px;
            height:50px;
        }

效果如下：
在这里插入图片描述
现在把第四个画成扇形

#sector{
            border-radius: 50px 0px 0px 0px;
            width:50px;
            height:50px;
        }

效果如下：
在这里插入图片描述
欧克，你学会了吗~