CSS3圆角

最新推荐文章于 2025-07-24 10:59:45 发布

原创最新推荐文章于 2025-07-24 10:59:45 发布 · 406 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3

CSS3 专栏收录该内容

4 篇文章

订阅专栏

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

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; 
}

效果：