课程表

Mafunzo ya Kitabu cha Mwongozo cha CSS

CSS 属性

Kurasa kinaingia

Mwongozo wa kufaa:

Kiboxi cha CodeW3C.com

Hisia hisaidi ya CSS border-end-start-radius

Mpaka wa kudai border-end-end-radius
Mpaka wa kuzingatia border-image

Maelezo na matumizi

border-end-start-radius Kifupi hiki kinachotumika kueleza eneo la msaada wa kikata kina kweli (block-end) na uangalifu wa kifupi kina kweli (inline-start) kwa radiusi.

Ujumbe:kifupi kizitoa writing-mode、text-orientation 和 direction Inaeleza uangalifu wa kikata na uangalifu wa kifupi. Kwa hivyo, kifupi hizi kinaathirika border-end-start-radius Matokeo ya kifupi. Kwa ukurasa wa Kihispania, uangalifu wa kifupi ni kutoka kushoto hadi kulia, na uangalifu wa kikata kutoka juu hadi chini.

Ikiwa border-end-start-radius Aina ya kifupi kimeingia na maadili mbili, eneo la msaada kina kweli:

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

Ikiwa border-end-start-radius Aina ya kifupi cha kifupi kimeingia, eneo la msaada kina kweli:

border-end-start-radius: 50px;

CSS border-end-start-radius Mwili na border-bottom-left-radius、border-bottom-right-radius、border-top-left-radius 和 border-top-right-radius 属性非常相似，但 border-end-start-radius 属性依赖于块方向和行内方向。

实例

例子 1

为某些元素的块方向末尾和行内方向起始处添加圆角：

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

Jaribu kwa utafutaji wako

Mfano 2: Kufikia kwa kina hiki ya direction

Mwito wa kina hiki wa mwisho wa mawendo na mawendo wa kina hiki wa kwanza wa mawendo huanza na direction Mfano wa uharibifu wa kina hiki:

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

Jaribu kwa utafutaji wako

Mfano 3: Kufikia kwa kina hiki ya writing-mode

Mwito wa kina hiki wa mwisho wa mawendo na mawendo wa kina hiki wa kwanza wa mawendo huanza na writing-mode Mfano wa uharibifu wa kina hiki:

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

Jaribu kwa utafutaji wako

Inayotumika kwa CSS:

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

Chaguo cha kina hiki

Chaguo	Maelezo
0	Chaguo cha kuzingatia.
upana	Inadefiniwa kwa kina hiki katika uharibifu wa kina hiki wa mwisho wa mawendo na uharibifu wa kina hiki wa kwanza wa mawendo. Angalia:Mafunzo ya Viwango cha CSS.
%	Inadefiniwa kwa ukurugenzi wa upana wa kina hiki katika mbinu yake ya uharibifu wa kina hiki.
initial	Inasababisha ukurudisha kwa chaguo cha kuzingatia. Angalia: initial.
inherit	Inaingia katika ukurugenzi wa ukweli wa kina yake kwa kina hiki. Angalia: inherit.

Mifano ya matukio

Chaguo cha kuzingatia:	0
Inasababisha:	Haiwezi
Makini ya uharibifu:	Inafikia. Angalia:Mafano ya uharibifu wa mawasiliano.
Tofauti:	CSS3
Inayotumika kwa JavaScript:	object.style.borderEndStartRadius="50px"