Proprietà CSS border-end-start-radius

Pagina precedente border-end-end-radius
Pagina successiva border-image

定义和用法

border-end-start-radius 属性用于定义元素块方向末尾（block-end）和行内方向起始处（inline-start）之间的圆角半径。

注意：相关的 CSS 属性 writing-mode,text-orientation e direction 定义了块方向和行内方向。这就是为什么这些属性也会影响 border-end-start-radius 属性的结果。对于英文页面，行内方向是从左到右，块方向是向下。

如果 border-end-start-radius 属性有两个值，则圆角将是一个椭圆：

border-end-start-radius: 50px 100px;

如果 border-end-start-radius 属性有一个值，则圆角将是一个圆形：

border-end-start-radius: 50px;

CSS border-end-start-radius 属性与 border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius e border-top-right-radius è molto simile, ma border-end-start-radius L'attributo dipende dalla direzione del blocco e della direzione in linea.

Esempio

Esempio 1

Aggiungi arrotondamenti alla fine della direzione del blocco e all'inizio della direzione in linea per alcuni elementi:

#example1 {
  background-color: lightblue;
  border-end-start-radius: 50px;
}
#example2 {
  background-color: lightblue;
  border-end-start-radius: 50px 20px;
}
#example3 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  direction: rtl;
}
#example4 {
  background-color: lightblue;
  border-end-start-radius: 50%;
  writing-mode: vertical-rl;
}

Prova tu stesso

Esempio 2: Combinazione dell'attributo direction

La posizione dell'angolo arrotondato alla fine della direzione del blocco e all'inizio della direzione in linea è influenzata da direction Impatto dell'attributo:

#example1 {
  border: 2px solid red;
  direction: rtl;
  border-end-start-radius: 25px;
}

Prova tu stesso

Esempio 3: Combinazione dell'attributo writing-mode

La posizione dell'angolo arrotondato alla fine della direzione del blocco e all'inizio della direzione in linea è influenzata da writing-mode Impatto dell'attributo:

#example2 {
  border: 2px solid red;
  writing-mode: vertical-rl;
  border-end-start-radius: 25px;
}

Prova tu stesso

Sintassi CSS

border-end-start-radius: 0|length|initial|inherit;

Valore dell'attributo

Valore	Descrizione
0	Valore predefinito.
length	Definisce la forma arrotondata alla fine della direzione del blocco e all'inizio della direzione in linea. Vedi:Unità CSS.
%	Definisce la forma arrotondata del blocco in percentuale della lunghezza dell'elemento sull'asse corrispondente.
initial	Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit	Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito:	0
Ereditarietà:	No
Produzione dell'animazione:	Supportato. Si prega di consultare:Proprietà correlate con l'animazione.
Versione:	CSS3
Sintassi JavaScript:	object.style.borderEndStartRadius="50px"