border-radius制作圆形，半圆形，扇形，椭圆

最新推荐文章于 2025-06-16 20:55:09 发布

原创最新推荐文章于 2025-06-16 20:55:09 发布 · 3.4k 阅读

6 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

使用border-radius 制作圆形有两点技巧：

（1）元素的宽高形同

（2）border-radius值为宽或高的一半，或者直接设置为50%；

制作半圆大同小异，只是圆角方位配合的问题。

下面仅给出示例：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="D:\myweb\css\3-19-1.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="div">圆</div>
 
    <div class="semicircle top">上半圆</div>
    <div class="semicircle right">右半圆</div>
    <div class="semicircle bottom">下半圆</div>
    <div class="semicircle left">左半圆</div>
</body>
</html>

css代码：

.div{
    width: 200px;
    height: 200px;
    border:2px  orange solid;
    border-radius: 50%;
}
.semicircle{
    background-color: orange;
    margin: 30px;
}
.top{
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
}
.right{
    width: 50px;
    height: 100px;
    border-radius: 0 50px 50px 0;
}
.bottom{
    width: 100px;
    height: 50px;
    border-radius: 0 0 50px 50px;
}
.left{
    width: 50px;
    height: 100px;
    border-radius: 50px 0 0 50px;
}

效果如下：

制作扇形遵循三同一不同的原则，三同就是宽高半径相同，一不同就是圆角位置不同。

.div{
    width: 200px;
    height: 200px;
    border:2px  orange solid;
    border-radius: 50%;
}
.semicircle{
    background-color: orange;
    margin: 30px;
}
.top{
    width: 100px;
    height: 100px;
    border-radius: 100px 0 0 0;
}
.right{
    width: 100px;
    height: 100px;
    border-radius: 0 100px 0 0;
}
.bottom{
    width: 100px;
    height: 100px;
    border-radius: 0 0 100px 0;
}
.left{
    width: 100px;
    height: 100px;
    border-radius: 0 0 0 100px;
}

椭圆：

.semicircle{
    background-color: orange;
    margin: 30px;
}
.top{
    width: 100px;
    height: 50px;
    border-radius: 100px/50px;
}
.right{
    width: 50px;
    height: 100px;
    border-radius: 50px/100px;
}