边框左上角半径 | border-top-left-radius (Backgrounds & Borders) - CSS 中文开发手册
border-top-left-radiusCSS属性设置元素的左上角的圆。
/* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit;
舍入可以是一个圆或一个椭圆，或者如果其中一个值0,没有舍入，角落是方形的。
一个背景，一个图像或一个颜色，被剪裁在边界，甚至是一个圆形的; 剪辑的确切位置由background-clip属性的值定义。
如果此属性的值未在border-radius属性之后应用于元素的速记属性。border-top-left-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 ellipse is used as the border div { border-top-left-radius: 40px 40px; } |
| | An arc of ellipse is used as the border div { border-top-left-radius: 40px 20px; } |
| | The box is a square: an arc of circle is used as the border div { border-top-left-radius: 40%; } |
| | The box is not a square: an arc of ellipse is used as the border div { border-top-left-radius: 40%; } |
| | The background color is clipped at the border div { border-top-left-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-left-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 49 -webkit- 2 1 — 12 (as -moz-border-radius-topright) | 9 | 10.5 | 5 3 -webkit- |
| Percentages | 4 | (Yes) | 4 13 | 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 44到48，-webkit-前缀可用于layout.css.prefixes.webkit首选项。从Firefox 49开始，首选项默认为true。
在Firefox 4之前，<percentage>即使为高度指定半径，也会与盒子的宽度相关。这意味着-moz-border-radius-topright总是绘制一个圆弧，而不是一个椭圆，后面是单个值。
另见
边界半径相关的CSS属性：CSS简写属性border-radius，各个顶角的属性：border-top-right-radius，border-bottom-right-radius，和border-top-left-radius。
CSS 中文开发手册