CSS3圆角

最新推荐文章于 2025-05-29 11:15:28 发布

sayJS_wang

最新推荐文章于 2025-05-29 11:15:28 发布

阅读量388

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： CSS3

本文链接：https://blog.youkuaiyun.com/Say_wind/article/details/79073767

CSS3 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用CSS的border-radius属性来设置元素的圆角边框，并提供了多个实例来展示不同设置下元素四角弧度的变化效果。

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

border-radius:

值:
border-top-left-radius 左上角的弧度
border-top-right-radius 右上角的弧度
border-bottom-left-radius 左下角的弧度
border-bottom-right-radius 右下角的弧度
事例：

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

效果：