CSS border-start-end-radius 属性

上一页 border-spacing
下一页 border-start-start-radius

定义和用法

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

注意：相关的 CSS 属性 writing-mode,text-orientation at 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 at border-top-right-radius Ang mga katangian ay napapaligiran ng kapareho, ngunit border-start-end-radius Ang katangian ay umaasa sa direksyon ng bloke at ng inline.

Halimbawa

Mga halimbawa 1

Magdagdag ng rounding sa simula ng bloke at sa katapusan ng inline na direksyon ng ilang elemento:

#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;
}

Subukan nang personal

Mga halimbawa 2: Pinagsama-sama ang katangian ng direction

Ang posisyon ng rounding sa simula ng bloke at sa katapusan ng inline na direksyon ay nakasangguni sa: direction Epekto ng katangian:

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

Subukan nang personal

Mga halimbawa 3: Pinagsama-sama ang katangian ng writing-mode

Ang posisyon ng rounding sa simula ng bloke at sa katapusan ng inline na direksyon ay nakasangguni sa: writing-mode Epekto ng katangian:

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

Subukan nang personal

Grammar ng CSS

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

Halaga ng katangian

Halaga	Paglalarawan
0	Default value.
length	Tinukoy ang hugis ng rounding sa simula ng bloke at sa katapusan ng inline na direksyon. Tingnan ang:Unit sa CSS.
%	Tinukoy ang hugis ng rounding, na proporsyonal sa haba ng elemento sa kanyang katugmang eksyasyon.
initial	I-set ang katangian na ito sa kanyang default value. Tingnan ang: initial.
inherit	Manggagaling sa kanyang magulang na elemento ang katangian na ito. Tingnan ang: inherit.

Detalye ng teknolohiya

Default value:	0
Inheritsibility:	Hindi
Gawin ang animasyon:	Sumusuporta. Tingnan ang:Mga katangian ng animasyon.
Bersyon:	CSS3
Grammar ng JavaScript:	object.style.borderStartEndRadius="50px"