border-top-left-radius

概要

border-top-left-radius 用来设置元素左上角的圆角效果。这段圆弧（角）可以是圆或椭圆的一部分。如果其中有一个值为0，那么将无圆角效果（见border-top-left-radius取值方式)。

border-radius.png

盒模型的背景，可以是一张图片或一种颜色，会在边框处被剪裁，更甚至可以是一个圆；剪切的额外定位通过另一个CSS属性"background-clip"来定义。

在border-top-left-radius属性值之后，如果作用的元素上没有设置“border-radius”属性，那么这个属性值就会通过简写属性重新设置成它的初始值。

语法

/* the corner is a circle */
/* border-top-left-radius: radius */
border-top-left-radius: 3px;

/* the corner is an ellipsis */
/* border-top-left-radius: horizontal vertical */
border-top-left-radius: 0.5em 1em;

border-top-left-radius: inherit;
属性值：
radius
可以是 <length> 或者 <percentage>，表示左上角边框的圆角半径。
horizontal
可以是 <length> 或者 <percentage>，表示椭圆的水平半长轴在被用作边框左上角的半径。
vertical
可以是 <length> 或者 <percentage>，表示椭圆的垂直半长轴在被用作边框左上角的半径。

取值

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

Formal syntax

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

示例

实例 代码
 
 椭圆的弧被用作左上角边框 
div {
  border-top-left-radius: 40px 40px;
}
 
 椭圆的弧被用作左上角边框 
div {
  border-top-left-radius: 40px 20px;
}
 
 盒子是方形的，圆弧被用作左上角边框 
div
  border-top-left-radius: 40%;
}
 
 盒子不是方形的，椭圆的弧被用作左上角边框 
div {
  border-top-left-radius: 40%;
}
 
 背景色在左上角被剪切 
div {
  border-top-left-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-left-radius		 Candidate Recommendation Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 -webkit
4.0		 1.0 (1.0)-moz[1]
4.0 (2.0)		 9.0 10.5 3.0 (522)-webkit
5.0 (532.5)
Percentages 4.0 1.0 (1.0)[2]
4.0 (2.0)		 9.0 10.5 5.0 (532.5)
Elliptical corners 1.0 3.5 (1.9.1) 9.0 10.5 3.0 (522)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
Percentages ? ? ? ? ?
Elliptical corners ? ? ? ? ?

 

备注：

[1] 火狐浏览器较早的版本(Firefox 1 到 Firefox 12) 在使用这个属性时需使用浏览器厂商前缀，-moz-border-radius-topleft,最近的版本Mozilla实现了这个属性的支持（在最终的版本被敲定之前）。

Gecko内核在圆角处无法正确的表现点划线（dotted）和虚线（dashed）:它会将它们渲染成实线(bug 382721).

[2] 在火狐4之前，这个 <percentage> 是相对于盒子的宽度，即便指定了一个高做为半径. 这被意味着到 -moz-border-radius-topleft是单个值的时候，它总是画一个圆弧，而不是一个椭圆。

另请参阅