CSS-左下角的邊框半徑 | border-bottom-left-radius

border-bottom-left-radius

CSS屬性設定元素的左下角的圓。

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

/* Percentage values */
border-bottom-left-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */
border-bottom-left-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */
border-bottom-left-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */

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

border-bottom-left-radius: inherit;      

舍入可以是一個圓或一個橢圓，或者如果其中一個值

沒有舍入，角落是方形的。

一個背景，一個圖像或一個顔色，被剪裁在邊界，甚至是一個圓形的; 剪輯的确切位置由

background-clip

屬性的值定義。

如果此屬性的值未在CSS屬性

border-radius

後應用于元素的速記屬性中設定，則

border-bottom-left-radius

此屬性的值将通過速記屬性重置為其初始值。

初始值
适用元素	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-bottom-left-radius: 40px 40px; }
	An arc of ellipse is used as the border div { border-bottom-left-radius: 40px 20px; }
	The box is a square: an arc of circle is used as the border div { border-bottom-left-radius: 40%; }
	The box is not a square: an arc of ellipse is used as the border div { border-bottom-left-radius: 40%; }
	The background color is clipped at the border div { border-bottom-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-bottom-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-
	4	(Yes)	4 13			5
Ellipitcal corners	1		3.5			3

	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
	?			(Yes)1

1. 在Firefox 50之前，圓角的邊框樣式總是呈現出

border-style

設定為

solid

的樣式

，

這已在Firefox 50中修複。

2. 從Firefox 44到48，

-webkit-

字首可用于

layout.css.prefixes.webkit

首選項。從Firefox 49開始，首選項預設為

true

。

3. 在Firefox 4之前，

<percentage>

即使為高度指定半徑，也會與盒子的寬度相關。這意味着

-moz-border-radius-topright

總是繪制一個圓弧，而不是一個橢圓，後面是單個值。

另見

邊界半徑相關的CSS屬性：CSS簡寫屬性

border-radius

，各個頂角的屬性：

border-top-right-radius

，

border-bottom-right-radius

，和

border-top-left-radius