CSS3圆角（border-radius）

最新推荐文章于 2024-07-16 04:29:30 发布

转载最新推荐文章于 2024-07-16 04:29:30 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/TheLegendofAJ/p/3220592.html

本文介绍了CSS3中的border-radius属性在IE9+、Chrome、Firefox2、3+及Safari3.2+浏览器上的支持情况，并通过实例演示了如何设置不同大小的圆角边框。

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

CSS3中的border-radius支持IE9+,chrome,firefox 2、3+,以及safari3.2+浏览器。

border-radius可直接使用，无需加前缀(注意：firefox13取消了-moz前缀，即由原来的-moz-border-radius变为border-radius，加上前缀会造成无法显示圆角，chrome加前缀和不加前缀都可以)border-radius后面直接加值即可，该值来确定圆角的大小，如：border-radius:5px;

1、有边框：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #div1{
            padding: 10px;
            width:300px;
            height:100px;
            border:3px solid #cc0000;
            border-radius:10px;
        }
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

效果：

2、无边框

在css中添加颜色代码即可

background: #cc0000;

效果

无边框完整代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #div2{
            padding: 10px;
            width:300px;
            height:100px;
            border:3px solid #cc0000;
            border-radius:10px;
            background: #cc0000;
        }
    </style>
</head>
<body>
<div id="div2"></div>
</body>
</html>

3、四角不同大小

四角不同大小特别简单，使用border-radius:5px 10px 15px 20px;整合即可。

如下效果：

完整代码是：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #div3{
            padding: 10px;
            width:300px;
            height:100px;
            border:3px solid #cc0000;
            border-radius:5px 10px 15px 20px;
            background: #cc0000;
        }
    </style>
</head>
<body>
<div id="div3"></div>
</body>
</html>

转载于:https://www.cnblogs.com/TheLegendofAJ/p/3220592.html