mozilla
您的搜索结果

    border-radius

    概要

     border-radius 用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两个半径时确定一个椭圆,这个(椭)圆与边框的交集形成圆角效果。

    Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

    即使元素没有边框,圆角也可以用到 background 上面,具体效果受 background-clip 影响。

    这是一个简写属性,用来设置 border-top-left-radius, border-top-right-radius, border-bottom-right-radiusborder-bottom-left-radius

    和其他简写属性类似,无法为个别值设定为继承,如 border-radius:0 0 inherit inherit,这会覆盖一部分现有定义。在这种情况下只能使用完整属性来指定。

    • 初始值 the concatenation of the initial values of its longhand properties:
      • border-top-left-radius: 0
      • border-top-right-radius: 0
      • border-bottom-right-radius: 0
      • border-bottom-left-radius: 0
    • 适用元素 all elements; but UA are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.
    • 可继承 no
    • Percentages refer to the corresponding dimension of the border box
    • 适用媒体 visual
    • 计算值 as each of the properties of the shorthand:
      • border-bottom-left-radius: two absolute length or percentages
      • border-bottom-right-radius: two absolute length or percentages
      • border-top-left-radius: two absolute length or percentages
      • border-top-right-radius: two absolute length or percentages
    • 可动画 as each of the properties of the shorthand:
      • border-top-left-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
      • border-top-right-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
      • border-bottom-right-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
      • border-bottom-left-radius: yes, as a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    语法

    Formal syntax: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
    半径的第一个语法取值可取1~4个值:
    border-radius: radius             
    border-radius: top-left-and-bottom-right top-right-and-bottom-left 
    border-radius: top-left top-right-and-bottom-left bottom-right 
    border-radius: top-left top-right bottom-right bottom-left 
    
    半径的第二个语法取值也可取1~4个值
    border-radius: (first radius values) / radius             
    border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left 
    border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right 
    border-radius: (first radius values) / top-left top-right bottom-right bottom-left 
    
    border-radius: inherit
    

    属性值

    radius all-corner.png 可以是 <length> 或者 <percentage>,表示边框四角的圆角半径。只在单值语法中使用。
    top-left-and-bottom-right top-left-bottom-right.png 可以是 <length> 或者 <percentage>,表示边框左上角和右下角的圆角半径。只在双值语法中使用。
    top-right-and-bottom-left top-right-bottom-left.png 可以是 <length> 或者 <percentage>,表示边框右上角和左下角的圆角半径。只在双值或三值语法中使用。
    top-left top-left.png 可以是 <length> 或者 <percentage>,表示边框左上角的圆角半径。只在三值或四值语法中使用。
    top-right top-right.png 可以是 <length> 或者 <percentage>,表示边框右上角的圆角半径。只在四值语法中使用。
    bottom-right bottom-rigth.png 可以是 <length> 或者 <percentage>,表示边框右下角的圆角半径。只在三值或四值语法中使用。
    bottom-left bottom-left.png 可以是 <length> 或者 <percentage>,表示边框左下角的圆角半径。只在四值语法中使用。
    inherit   表示四个值都从父元素计算值继承。

    取值

    <length>
    <length> 定义圆形半径或椭圆的半长轴,半短轴。不能用负值。
    <percentage>
    使用百分数定义圆形半径或椭圆的半长轴,半短轴。水平半轴相对于盒模型的宽度;垂直半轴相对于盒模型的高度。不能用负值。

    举例:

    border-radius: 1em/5em;
    
    /* 等价于 */
    
    border-top-left-radius:     1em 5em;
    border-top-right-radius:    1em 5em;
    border-bottom-right-radius: 1em 5em;
    border-bottom-left-radius:  1em 5em;
    
    border-radius: 4px 3px 6px / 2px 4px;
    
    /* 等价于 */
    
    border-top-left-radius:     4px 2px;
    border-top-right-radius:    3px 4px;
    border-bottom-right-radius: 6px 2px;
    border-bottom-left-radius:  3px 4px;
    

    示例

      border: solid 10px;
      /* the border will curve into a 'D' */  
      border-radius: 10px 40px 40px 10px;
    
      border: groove 1em red;  
      border-radius: 2em;
    
      background: gold;
      border: ridge gold;
      border-radius: 13em/3em; 
    
      border: none;
      border-radius: 40px 10px;  
    
      border: none;
      border-radius: 50%; 
    

    在线示例

    示例 1 : http://jsfiddle.net/Tripad/qnGKj/2/

    示例 2 : http://jsfiddle.net/Tripad/qnGKj/3/

    示例 3 : http://jsfiddle.net/Tripad/qnGKj/4/

    示例 4 : http://jsfiddle.net/Tripad/qnGKj/5/

    示例 5 : http://jsfiddle.net/Tripad/qnGKj/6/

    注意

    • 在 Gecko 中,点状和虚线状圆角边框被渲染为了实线 bug 382721.
    • 当表格元素的 border-collapse 为 collapse 时 border-radius 不会生效。
    • 旧版本 WebKit 对于多重值有不同的处理方式,见下。

    规范

    Specification Status Comment
    CSS Backgrounds and Borders Module Level 3
    border-radius
    Candidate Recommendation  

    浏览器兼容性

    Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Basic support 4.0 (2.0)
    1.0 (1.7 or earlier)-moz
    4.0
    0.2-webkit
    9.0 10.5 5.0
    3.0-webkit
    Elliptical borders 3.5 (1.9.1) yes yes yes yes, but see below
    4 values for 4 corners yes 4.0 yes yes 5.0
    Percentages yes
    was (see below)
    yes yes 11.5 5.1
    Feature iOS Safari Opera Mini Opera Mobile Android Browser
    Basic support 3.2-webkit Not supported Not supported 2.1-webkit
    Elliptical borders ? Not supported Not supported ?
    4 values for 4 corners ? Not supported Not supported ?
    Percentages ? Not supported Not supported ?

    <percentage>

    • 在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
    • 在 11.50 版本以前的 Opera 中实现有问题。
    • Gecko 2.0 (Firefox 4) 版本前实现不标准:水平半轴和垂直半轴相对于盒子模型的宽度。
    • 在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。

    Gecko notes

    In Gecko 2.0 -moz-border-radius was renamed to border-radius; -moz-border-radius was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0

    • changes the handling of <percentage> values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;
    • makes rounded corners clip content and images (if overflow: visible is not set)
    Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).

    WebKit notes

    旧版本的 Safari 和 Chrome (532.5 之前)

    • 只支持单值设定四个角。必须使用完整值来设置不同角。 
    • 不支持斜杠 / 符号,如果指定了两个值,那么四个角都为椭圆角.
      /* 它们是等价的 */
      
      -webkit-border-radius: 40px 10px;
              border-radius: 40px/10px;
      

    Opera notes

    In Opera (prior to Opera 11.60), applying border-radius to replaced elements will not have rounded corners.

    另请参阅

    文档标签和贡献者

    此页面的贡献者有: xiaoho, Breezewish, yan, teoli
    最后编辑者: Breezewish,