CSS border-block-style egenskab

Definition og brug

relaterte CSS-egenskaper Egenskaben indstiller kantstilen for elementet i blokretningen.

relaterte CSS-egenskaper Værdien af egenskaben kan indstilles på forskellige måder:

hvis relaterte CSS-egenskaper egenskaben har to værdier:

border-block-style: solid;
  • Kanten af blokken starter er en gestrikket linje
  • Kanten af blokken slutter er en prikket linje

hvis relaterte CSS-egenskaper egenskaben har en værdi:

border-block-style: gestrikket;
  • Kanten af blokken starter og slutter er en gestrikket linje

CSS relaterte CSS-egenskaper egenskab med CSS-egenskaber border-bottom-styleborder-left-styleborder-right-style og border-top-style 非常相似,但 relaterte CSS-egenskaper 属性依赖于块方向。

Meget lik, menEgenskapen avhenger av blokkretningen. Eksempel 2: Kombinert med writing-mode-egenskapen Bemerk: relaterte CSS-egenskaper Definerer blokkretningen. Dette påvirker blokkens start- og sluttsted, samt

border-block-style

Egenskapsresultatet. For engelske sider, inline-veiledningen er fra venstre til høyre, blokkretningen er nedover.

Eksempel

Eksempel 1
  Sett kantstilen for blokkretningen:
writing-mode: vertical-rl;
#example1 {
  border-block-style: solid;
writing-mode: vertical-rl;

border-block-style: dotted;

#example2 {

border-block-style: dashed dotted; Eksempel 2: Kombinert med writing-mode-egenskapen Plasseringen av kantstilen ved begynnelsen og slutten av blokkretningen bestemmes av

writing-mode
  Egenskapsinnvirkning:
  div {
writing-mode: vertical-rl;

border-block-style: dotted;

}

Prøv det selv

CSS-syntaks

border-block-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; Egenskapsverdi
ingen Verdi
Beskrivelse Standardverdi. Angi ingen kant.
hidden Lik none, men unntatt i konflikthåndtering for tabellkant.
dashed Angi stiplede kant.
solid Angi helt kant.
double Angi dobbelt kant.
groove

Angi 3D grav kant.

Effekten avhenger av verdien av border-color.

ridge

Angi 3D hevet kant.

Effekten avhenger av verdien av border-color.

inset

Angi 3D innfelt kant.

Effekten avhenger av verdien av border-color.

outset

Angi 3D utbuktende kant.

Effekten avhenger av verdien av border-color.

initial Sett denne egenskapen til sin standardverdi. Se: initial.
inherit Arver denne egenskapen fra sin overordnede element. Se: inherit.

Teknisk detalj

Standardverdi: ingen
Arv: Nei
Animasjonsproduksjon: Ikke støttet. Se:Animasjonsrelaterte egenskaper.
Versjon: CSS3
JavaScript-syntaks: object.style.borderBlockStyle="dotted"

Nettleserstøtte

Tallene i tabellen viser den første nettleserversjonen som fullt ut støtter egenskapen.

Chrome Edge Firefox Safari Opera
87.0 87.0 66.0 14.1 73.0

Relaterede sider

Instruktioner:CSS kanter

Reference:CSS border egenskab

Reference:CSS border-block egenskab

Reference:CSS border-block-end-style egenskab

Reference:CSS border-block-start-style egenskab

Reference:CSS border-bottom-style egenskab

Reference:CSS border-left-stil egenskab

Reference:CSS border-right-stil egenskab

Reference:CSS border-top-stil egenskab

Reference:CSS writing-mode egenskab