CSS border-radius属性



  • 定义和用法

    border-radius属性定义元素角的半径。
    此属性可以包含一到四个值。以下是规则:
    四个值 - border-radius:15px 50px 30px 5px;
    (第一个值适用于左上角,第二个值适用于右下角,第三个值适用于右下角,第四个值适用于左下角):
    三个值 - border-radius:15px 50px 30px;
    (第一个值适用于左上角,第二个值适用于右上角和左下角,第三个值适用于右下角):
    两个值 - border-radius:15px 50px;
    (第一个值适用于左上角和右下角,第二个值适用于右上角和左下角):
    一个值 - border-radius:15px;
    (该值适用于所有四个角,它们均等地舍入:
    特征 说明
    默认值 0
    继承 没有
    动画 有。CSS动画参考
    CSS版本 CSS3
    JavaScript语法 object.style.borderRadius="25px"尝试一下
  • 浏览器支持

    表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-, -webkit-,-moz-或-o-指定使用前缀的第一个版本。
    属性 Internet Explorer Chrome FireFox Safari Opera
    属性名称
    border-radius
    9.0
    5.0
    4.0 -webkit-
    4.0
    3.0 -moz-
    5.0
    3.1 -webkit-
    10.5
  • CSS语法

    border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
    注意:每个半径的四个值按左上角,右上角,右下角,左下角的顺序给出。如果省略左下角,则与右上角相同。如果省略右下角,则与左上角相同。如果省略右上角,则与左上角相同。
  • 实例

    为两个<div>元素添加圆角:
    #example1 {
      border: 2px solid red;
      border-radius: 25px;
    }
    
    #example2 {
      border: 2px solid red;
      border-radius: 50px 20px;
    }
    
  • 属性值

    属性值 描述
    length 定义角的形状。 默认值为0。了解长度单位
    % 以%为单位定义角的形状
    initial 将此属性设置为其默认值。查看initial关键字
    inherit 从其父元素继承此属性。查看inherit关键字
  • 相关页面

    HTML教程:HTML样式
    CSS教程:CSS边框
    CSS教程:CSS圆角