css教程系列15：CSS3 圆角

最新推荐文章于 2024-07-04 14:41:29 发布

原创最新推荐文章于 2024-07-04 14:41:29 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了CSS3中border-radius属性的使用方法及其浏览器兼容性。通过具体示例展示了如何设置不同元素的圆角效果，并提供了多个样例代码帮助读者理解属性的应用。

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

1 css圆角：

1.1 浏览器支持：-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。

1.2 属性 border-radius：

代码如下：

#rcorners1 {
    border-radius: 25px;
    background: #cecece;
    /*padding: 20px;*/
    width: 50px;
    height: 50px;
}
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #99ffff;
    /*padding: 20px;*/
    width: 100px;
    height: 100px;
}
#rcorners3 {
    border-radius: 25px;
    background: url("img/121.png");
    padding: 20px;
    width: 100px;
    height: 100px;
}