CSS3 圆角

前言

  • 使用 CSS3 border-radius 属性,可以给任何元素制作 “圆角”。
属性 描述 CSS 备注 🔗
border-radius 所有四个边角 border---radius 属性的缩写 3 🔗
border-top-left-radius 定义了左上角的弧度 3 🔗
border-top-right-radius 定义了右上角的弧度 3 🔗
border-bottom-right-radius 定义了右下角的弧度 3 🔗
border-bottom-left-radius 定义了左下角的弧度 3 🔗

1、圆角

  • 在 CSS2 中添加圆角棘手。不得不在每个角落使用不同的图像。

  • 在 CSS3 中,很容易创建圆角。在 CSS3 中 border-radius 属性被用于创建圆角。

属性 描述 CSS 备注 🔗
border-radius 所有四个边角 border---radius 属性的缩写 3 🔗
  • 属性值
描述
length 定义弯道的形状
% 使用 % 定义角落的形状
  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <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(https://demo.qianchia.com/media/image/demo19.png);
    background-position: left top;
    background-repeat: repeat;

    padding: 20px;
    width: 200px;
    height: 150px;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    <p> border-radius 属性允许向元素添加圆角。</p>
    <p>指定背景颜色元素的圆角:</p>
    <p id="rcorners1">圆角</p>
    <p>指定边框元素的圆角:</p>
    <p id="rcorners2">圆角</p>
    <p>指定背景图片元素的圆角:</p>
    <p id="rcorners3">圆角</p>
  • 效果


    border-radius 属性允许向元素添加圆角。


    指定背景颜色元素的圆角:


    圆角


    指定边框元素的圆角:


    圆角


    指定背景图片元素的圆角:


    圆角


2、指定每个圆角

  • 如果在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。
属性 描述 CSS 备注 🔗
border-radius 所有四个边角 border---radius 属性的缩写 3 🔗
border-top-left-radius 定义了左上角的弧度 3 🔗
border-top-right-radius 定义了右上角的弧度 3 🔗
border-bottom-right-radius 定义了右下角的弧度 3 🔗
border-bottom-left-radius 定义了左下角的弧度 3 🔗
  • 属性值
描述
length 定义弯道的形状
% 使用 % 定义角落的形状
  • 如果要在四个角上一一指定,可以使用以下规则:

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <style>
    #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;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    <p>四个值 - border-radius: 15px 50px 30px 5px:</p>
    <p id="rcorners4"></p>

    <p>三个值 - border-radius: 15px 50px 30px:</p>
    <p id="rcorners5"></p>

    <p>两个值 - border-radius: 15px 50px:</p>
    <p id="rcorners6"></p>
  • 效果


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



    三个值 - border-radius: 15px 50px 30px:



    两个值 - border-radius: 15px 50px:



3、椭圆边角

  • 还可以创建椭圆边角。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <style>
    #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;
    }
    </style>
    1
    2
    3
    4
    5
    6
    7
    8
    <p>椭圆边框 - border-radius: 50px/15px:</p>
    <p id="rcorners7"></p>

    <p> 椭圆边框 - border-radius: 15px/50px:</p>
    <p id="rcorners8"></p>

    <p>椭圆边框 - border-radius: 50%:</p>
    <p id="rcorners9"></p>
  • 效果


    椭圆边框 - border-radius: 50px/15px:



    椭圆边框 - border-radius: 15px/50px:



    椭圆边框 - border-radius: 50%:



4、border-radius: 50% 和 100% 的区别

  • border-radius 的值如果为百分比,则为盒子的宽度与高度的比值。所以当值为 50% 的时候正好是直径为盒子长度的圆。那当 border-radius 为 100% 的时候,直径应该为两倍的边长,那为什么最终效果是和 50% 的时候的长度是一样的呢?

  • 其实在 W3C 中,如果两个相邻角的半径之和超过了相应盒子边的长度,那么浏览器要重新计算,以保证两者不会重合。

  • 假设有一个 100px 的盒子,若 border-top-left-radius:100%; 则盒子会变成一个半径为 100px 的 1/4圆。(如下图左)

  • 这个时候,如果我们再给一个 border-top-right-radius:100%; 此时相邻的两个角的半径之和已经超过了盒子的长度,浏览器需要重新计算。计算的规则就是同时缩放两个圆角的半径,直至两个相邻角的半径和为盒子的长度。也就是说,当两个圆角的半径为 50% 的时候,圆角正好符合 W3C 标准。(下图右)

5、浏览器支持

属性
border-radius 5.0
4.0 -webkit-
9.0 4.0
3.0 -moz-
5.0
3.1 -webkit-
10.5
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
文章目录
  1. 1. 前言
  2. 2. 1、圆角
  3. 3. 2、指定每个圆角
  4. 4. 3、椭圆边角
  5. 5. 4、border-radius: 50% 和 100% 的区别
  6. 6. 5、浏览器支持
隐藏目录