Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
您的搜索结果

    border-top-right-radius

    这篇翻译不完整。请帮忙从英语翻译这篇文章。

    概要

    border-top-right-radius属性设置元素的右上角弧形，这个圆弧可能是一个椭圆，或者其中一个值是0的话，就是没有圆弧，换句话就是说拐角是方形的。

    border-top-right-radius.png

    一个背景通常以一张图片或者颜色开始，在边框处被剪切，更甚至就是一个圆形；剪切的额外定位通过一个CSS属性"background-clip"来定义。

    在border-top-radius-radiu属性值之后，如果作用在一个元素上没有设置“border-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.
    是否是继承属性否
    Percentagesrefer to the corresponding dimension of the border box
    适用媒体visual
    计算值two absolute lengths or percentages
    是否适用于 CSS 动画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.
    正规顺序the unique non-ambiguous order defined by the formal grammar

    语法

    How to read CSS syntax.

    正式语法: [ <length> | <percentage> ]{1,2}  
    border-top-right-radius: radius               /* the corner is a circle    */  E.g. border-top-right-radius: 3px
border-top-right-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-top-right-radius: 0.5em 1em

border-top-right-radius: inherit
     
     
     
     

    之上:

    radius
    这是一个<length>或者一个<percentage>，标志着圆的半径在这个拐角用作边框。
    horizontal
    这是一个<length>或者一个<percentage> ，标志着椭圆的水平半长轴在这个拐角被用作边框。
    vertical
    这是一个<length>或者一个<percentage>，标志着椭圆的垂直半长轴在这个拐角被用作边框。

    属性值

    <长度>
    标志着圆弧半径的大小或者椭圆的半长轴或半短轴，它属性值的数据类型表示任意单位通过<length>，负值是无效的。
    <百分数>
    标志着圆弧半径的大小或者椭圆的半长轴或半短轴，水平轴的百分值是相对盒模型的宽度，垂直轴的百分值是相对盒模型的宽度，负值是无效的。

    例子

    实例 代码
     
    		 圆形的弧被用作边框 
    div {
  border-top-right-radius: 40px 40px;
}
     
     
     
     
    		 椭圆的弧被用作边框 
    div {   
  border-top-right-radius: 40px 20px;
}
     
     
     
     
    		 盒子是方形，圆形的弧被用作边框 
    div {   
  border-top-right-radius: 40%;
}
     
     
     
     
    		 盒子不是方形，椭圆的弧被用作边框 
    div {   
  border-top-right-radius: 40%;
}
     
     
     
     
    		 背景颜色在边框处剪切 
    div {
  border-top-right-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}
     
     
     
     
     
     

    技术参数

    详细说明 状态 解释
    CSS Backgrounds and Borders Module Level 3
    border-top-right-radius    		 Candidate Recommendation Initial specification

    浏览器兼容性

    特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 0.2 -webkit

    1.0 (1.0) - 12.0 (12.0)-moz
    但有一个非标准的名称:
    -moz-border-radius-topright

    		 9.0 10.5 3.0 (522)-webkit
    4.0 4.0 (2.0) 5.0 (532.5)
    百分值 4.0 1.0 (1.0) 有一个bug (see note) 9.0 10.5 5.0 (532.5)
    4.0 (2.0)
    椭圆拐角 0.2 3.5 (1.9.1) 9.0 10.5 3.0 (522 )
    特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本支持 ? ? ? ? ?

    浏览器备注

    火狐内核（Gecko）

    • 前缀版 (允许火狐1至火狐12) 属性使用一个不相同的名称 -moz-border-radius-topright, 相对最终属性当最终的名称被敲定之前火狐才算完成。
    • 在火狐4之前，这个 <percentage> 是相对盒子宽度，甚至是当指定半径作为一个高). 这被应用到 当-moz-border-radius-topright是单个值的时候，它总是画一个圆弧，而不是一个椭圆。
    • Gecko不可能正确地以点和虚线展示在圆角，它展示它们是以实线(bug 382721).

    参见

    边框半径相关的CSS属性：CSS速记 border-radius, 其它角的属性：border-top-left-radius, border-bottom-right-radius和 border-bottom-left-radius。

    文档标签和贡献者

    标签： 
     此页面的贡献者： Sebastianz, teoli, ziyunfei, finder
     最后编辑者: Sebastianz,