css实现半圆和圆

最新推荐文章于 2025-06-16 15:54:18 发布

原创最新推荐文章于 2025-06-16 15:54:18 发布 · 3.3k 阅读

3 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了一种使用CSS border-radius属性实现半圆角效果的方法。通过设置不同边的圆角半径，可以创建出独特的视觉效果，适用于网页设计中的各种元素。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>半圆角</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 50px;
            background-color: blue;
            border-radius: 100px 100px 0 0;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

结果如下：