CSS border-block-style 属性

Definition and usage

border-block-style The attribute sets the border style of the element in the block direction.

border-block-style The value of the attribute can be set in different ways:

If border-block-style The attribute has two values:

border-block-style: dashed dotted;
  • Block start border style is dashed
  • Block end border style is dot-dashed

If border-block-style The attribute has one value:

border-block-style: dashed;
  • Block start and end border styles are both dashed

CSS border-block-style attribute at CSS attribute border-bottom-style、border-left-style、border-right-style at border-top-style Masyadong katulad, ngunit border-block-style Ang katangian ay umaasa sa direksyon ng bloke.

Babala:kaugnay na mga katangian ng CSS writing-mode Naglalarawan ng direksyon ng bloke. Ito ay maapektuhan ng simula at katapusan ng bloke, at border-block-style Ang resulta ng katangian. Para sa pahina na Ingles, ang direksyon ng inlayang bahagi ay mula sa kanan papuntang kaliwa, ang direksyon ng bloke ay papuntang ilalim.

Halimbawa

Halimbawa 1

I-set ang estilo ng gilid sa direksyon ng bloke:

#example1 {
  border-block-style: solid;
}
#example2 {
  border-block-style: dashed dotted;
}

Subukan nang personal

Halimbawa 2: Kombinasyon ng katangian ng writing-mode

Ang posisyon ng gilid sa simula at katapusan ng direksyon ng bloke ay pinasasakop ng writing-mode Epekto ng katangian:

div {
  writing-mode: vertical-rl;
  border-block-style: dotted;
}

Subukan nang personal

Mga pangunahing pangyayari ng CSS

border-block-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Halaga ng katangian

Halaga Paglalarawan
wala Default na halaga. Tukuyin na walang gilid.
hidden Katulad ng wala, ngunit hindi sa mga kaso ng konflikto sa gilid ng talahanayan.
dotted Tukuyin ang titik na gilid.
dashed Tukuyin ang pahina na gilid.
solid Tukuyin ang tapat na gilid.
double Tukuyin ang dalawang linya na gilid.
groove

Tukuyin ang 3D likidong gilid.

Ang epekto ay depende sa halaga ng border-color.
ridge

Tukuyin ang 3D lumutang gilid.

Ang epekto ay depende sa halaga ng border-color.
inset

Tukuyin ang 3D nakakalaking gilid.

Ang epekto ay depende sa halaga ng border-color.
outset

Tukuyin ang 3D bukud-bukod na gilid.

Ang epekto ay depende sa halaga ng border-color.
initial I-set ang katangian na ito sa kanyang default na halaga. Tingnan ang: initial.
manggagawa Manggagawa mula sa magulang na elemento na ito ng katangian. Tingnan ang: manggagawa.

Detalye ng teknolohiya

Default na halaga: wala
Inherits: Hindi
Gawa ng animasyon: Hindi suportado. Tingnan ang:Katangian ng animasyon.
Bersyon: CSS3
Mga pangunahing pangyayari ng JavaScript: object.style.borderBlockStyle="dotted"

Suporta ng browser

Ang mga numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa katangian.

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

Pangkat ng pahina

Tuturial:CSS 边框

参考：CSS border 属性

参考：CSS border-block 属性

参考：CSS border-block-end-style 属性

参考：CSS border-block-start-style 属性

参考：CSS border-bottom-style 属性

参考：CSS border-left-style 属性

参考：CSS border-right-style 属性

参考：CSS border-top-style 属性

参考：CSS writing-mode 属性