纯CSS实现画圆功能

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

置顶

miveboy

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

阅读量7.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： boder css HTML 文章标签： css color html border

本文链接：https://blog.csdn.net/lm2813793139/article/details/39697225

这篇博客通过HTML和CSS展示了如何创建圆形和带有圆角的元素。通过设置`border-radius`属性，当`width`和`height`相等且为50%时，可以得到一个圆形；而设置具体的像素值则可以实现边角的弯曲效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
    .cicle{
        margin:0 auto;
        <span style="color:#3333FF;">width: 200px;
        height: 200px;</span>
        border:2px solid orange;
        background-color: #09f;
       <span style="color:#3333FF;"> border-radius: 50%;</span>
    }
    .radius{
        margin:0 auto;
        width: 300px;
        height: 200px;
        border:2px solid orange;
        background-color: #ccc;
       <span style="color:#FF6666;"> <span style="color:#3333FF;">border-radius: 15px;</span></span>
    }    
    </style>
</head>
<body>
    //圆形
    <div class="cicle">
        
    </div>
    //圆形边角
    <div class="radius">
        
    </div>
</body>
</html>

CSS中