CSS3 圆角

2019-05-12 本文已影响0人 maskerII


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 圆角</title>
    <style>
        #rcorners1{
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

        #rcorners2{
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

        #rcorners3{
            border-radius: 25px;
            background: url("images/img_lights.jpg");
            background-position: left top;
            background-repeat: repeat;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

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

        #rcorners7{
            border-radius: 15px; /*四个角值相同*/
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
        }

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

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

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




    </style>
</head>
<body>
<h1>border-radius 属性允许向元素添加圆角</h1>

<h2>指定背景颜色元素的圆角</h2>
<p id="rcorners1">圆角</p>

<h2>指定边框元素的圆角</h2>
<p id="rcorners2">圆角</p>

<h2>指定背景图片元素的圆角</h2>
<p id="rcorners3">圆角</p>
<br><br>

<h2>border-radius:15px 50px 30px 5px</h2>
<h2>左上15px 右上50px 右下30px 左下5px</h2>
<p id="rcorners4">圆角</p>

<h2>border-radius:15px 50px 30px</h2>
<h2>左上15px 右上50px 左下50px 右下30px</h2>
<p id="rcorners5">圆角</p>

<h2>border-radius:15px 50px</h2>
<h2>左上15px 右下15px 右上50px 左下50px</h2>
<p id="rcorners6">圆角</p>

<h2>四个角值相同 15px</h2>
<p id="rcorners7">圆角</p>

<h2>椭圆边框 - border-radius：50px/15px</h2>
<p id="rcorners8">圆角</p>
<h2>椭圆边框 - border-radius：15px/50px</h2>
<p id="rcorners9">圆角</p>
<h2>椭圆边框 - border-radius：50%</h2>
<p id="rcorners10">圆角</p>




</body>
</html>

1、浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

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

属性 border-radius
IE 9.0
Chrome 5.0 4.0-webkit-
Firefox 4.0 3.0-moz-
Safari 5.0 3.1-webkit-
Opera 10.5

2、CSS3 border-radius 属性

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

以下为三个实例：

指定背景颜色的元素圆角：
指定边框的元素圆角:
指定背景图片的元素圆角:

代码如下:

实例

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

3、CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同
以下为三个实例:

四个值 - border-radius: 15px 50px 30px 5px:
三个值 - border-radius: 15px 50px 30px:
两个值 - border-radius: 15px 50px:

以下为源代码:

实例

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

4、创建椭圆边角:

实例

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

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

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

5、CSS3 圆角属性

属性描述
border-radius 所有四个边角 border---radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度