其他分享
首页 > 其他分享> > 边框右上角半径 | border-top-right-radius (Backgrounds & Borders) - CSS 中文开发手册 - Break易站

边框右上角半径 | border-top-right-radius (Backgrounds & Borders) - CSS 中文开发手册 - Break易站

作者:互联网

  •   CSS 中文开发手册

    边框右上角半径 | border-top-right-radius (Backgrounds & Borders) - CSS 中文开发手册

    border-top-right-radiusCSS属性设置元素的右上角的圆。

    /* the corner is a circle */
    /* border-top-right-radius: radius */
    border-top-right-radius: 3px;
    
    /* the corner is an ellipse */
    /* border-top-right-radius: horizontal vertical */
    border-top-right-radius: 0.5em 1em;
    
    border-top-right-radius: inherit;

    舍入可以是圆或椭圆,或者如果其中一个值是0没有圆角,拐角处是正方形的。

    一个背景,一个图像或一个颜色,被剪裁在边界,甚至是一个圆形的; 剪辑的确切位置由background-clip属性的值定义。

    如果此属性的值未在CSS属性border-radius后应用于元素的速记属性中设置,则border-top-radius-radius此属性的值将通过简化属性重置为其初始值。

    初始值

    0

    适用元素

    all elements; but User Agents 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

    计算值

    two absolute <length>s or <percentage>s

    Animation type

    a length, percentage or calc();

    正规顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    只有一个值:

    值是<length>或者是<percentage>表示圆圈的半径,用于那个角落的边框。有两个值:第一个值是<length>或者是<percentage>表示省略号的水平半长轴,用于该角的边框。第二个值是<percentage>表示省略号的垂直半长轴,用于该角的边框。

    <length-percentage>表示圆周半径的大小,或省略的半长和半短轴的大小。作为绝对长度,它可以用css允许的任何单位表示。<length>数据类型。水平轴的百分比指框的宽度,垂直轴的百分比指框的高度。负值无效。

    正式语法

    <length-percentage>{1,2}where 
    <length-percentage> = <length> | <percentage>

    示例

    Live example

    Code

    An arc of circle is used as the border div { border-top-right-radius: 40px 40px; }

    An arc of ellipse is used as the border div { border-top-right-radius: 40px 20px; }

    The box is a square: an arc of circle is used as the border div { border-top-right-radius: 40%; }

    .

    The box is not a square: an arc of ellipse is used as the border div { border-top-right-radius: 40%; }

    The background color is clipped at the border div { border-top-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; }

    规范

    Specification

    Status

    Comment

    CSS Backgrounds and Borders Module Level 3The definition of 'border-top-right-radius' in that specification.

    Candidate Recommendation

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox

    Internet Explorer

    Opera

    Safari

    Basic Support

    4 1 -webkit-

    (Yes) (Yes) -webkit-

    41 1 — 12 (as -moz-border-radius-topright)

    9

    10.5

    5 3 -webkit-

    Percentages

    4

    (Yes)

    4 12

    9

    10.5

    5

    Ellipitcal corners

    1

    (Yes)

    3.5

    9

    10.5

    3

    Feature

    Android

    Chrome for Android

    Edge mobile

    Firefox for Android

    IE mobile

    Opera Android

    iOS Safari

    Basic Support

    ?

    ?

    (Yes) (Yes) -webkit-

    (Yes)1

    ?

    ?

    ?

    Percentages

    ?

    ?

    (Yes)

    (Yes)

    ?

    ?

    ?

    Ellipitcal corners

    ?

    ?

    (Yes)

    (Yes)

    ?

    ?

    ?

    在Firefox 50之前,圆角的边框样式总是呈现出border-style设置为solid的样式,这已在Firefox 50中修复。

    在Firefox 4之前,<percentage>即使为高度指定半径,也会与框的宽度相关。这意味着-moz-border-radius-topright总是绘制一个圆弧,而不是一个椭圆,后面是单个值。

    另见

    边界半径相关的CSS属性:CSS简写属性border-radius,各个顶角的属性:border-top-right-radius,border-bottom-right-radius,和border-top-left-radius。

  •   CSS 中文开发手册
  •   本文标题:边框右上角半径 | border-top-right-radius (Backgrounds & Borders) – CSS 中文开发手册 - Break易站转载请保留页面地址:https://www.breakyizhan.com/css/32327.html

    标签:right,top,Backgrounds,radius,Yes,border,CSS
    来源: https://www.cnblogs.com/breakyizhan/p/13233855.html