Sifat border-start-end-radius CSS

Halaman sebelumnya border-spacing
Halaman berikutnya border-start-start-radius

定义和用法

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

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

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

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

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

border-start-end-radius: 50px;

CSS border-start-end-radius 属性与 border-bottom-left-radius,border-bottom-right-radius,border-top-left-radius dan border-top-right-radius Ciri ini sangat serupa, tetapi border-start-end-radius Ciri ini bergantung kepada arah blok dan arah masuk.

Contoh

Contoh 1

Menambah rounding di permulaan arah blok dan di akhir arah masuk bagi beberapa elemen:

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

Cuba sendiri

Contoh 2: Gabungan ciri direction

Lokasi rounding di permulaan arah blok dan di akhir arah masuk terpengaruh oleh direction Pengaruh ciri:

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

Cuba sendiri

Contoh 3: Gabungan ciri writing-mode

Lokasi rounding di permulaan arah blok dan di akhir arah masuk terpengaruh oleh writing-mode Pengaruh ciri:

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

Cuba sendiri

Tatabahasa CSS

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

Nilai ciri

Nilai	Penerangan
0	Nilai lalai.
length	Mendefinikan bentuk rounding di permulaan arah blok dan di akhir arah masuk. Lihat:Unit CSS.
%	Mendefinikan bentuk rounding, dengan persen panjang elemen dalam sumbu yang sama.
initial	Tetapkan ciri ini kepada nilai lalainya. Lihat initial.
inherit	Mewarisi ciri ini dari elemen bapanya. Lihat inherit.

Butir teknologi

Nilai lalai:	0
Warisan:	Tidak
Pembuatan animasi:	Dipenuhi. Lihat:Ciri-ciri animasi.
Versi:	CSS3
Tatabahasa JavaScript:	object.style.borderStartEndRadius="50px"