CSS border-block-start-style ominaisuus

Edellinen sivu border-block-start-color
Seuraava sivu border-block-start-width

Määrittely ja käyttö

border-block-start-style Ominaisuus asettaa elementin reunan tyylin lohko-akselin alkupäässä.

CSS border-block-start-style Ominaisuus ja CSS-ominaisuus border-bottom-style、border-left-style、border-right-style ja border-top-style Erittäin samanlaiset, mutta border-block-start-style Ominaisuus riippuu blokin suunnasta.

Huomioitavaa:liittyviin CSS-ominaisuuksiin writing-mode Määrittää blokin suunnan. Tämä vaikuttaa blokin alkupään ja loppupään sijaintiin sekä border-block-start-style Ominaisuuden tulos. English pages, inline direction is from left to right, block direction is downward.

Esimerkki

Esimerkki 1

Aseta reunan alkupään tyyli:

div {
  border-block-start-style: dotted;
}

Kokeile itse!

Esimerkki 2: writing-mode-ominaisuuden yhdistäminen

Reunuksen alkupään suuntaa määrittää writing-mode Ominaisuuden vaikutus:

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

Kokeile itse!

CSS-kieli

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

Ominaisuuden arvo

Arvo	Kuvaus
none	Oletusarvo. Määrittää ilman reunusta.
hidden	Sama kuin "none", mutta eri tavalla käsitellään reunavirheiden ratkaisussa taulukkeissa.
dotted	Määritä pisteinen reunus.
dashed	Määritä viivainen reunus.
solid	Määritä täysin suora reunus.
double	Määritä kaksoisreunus.
groove	Määritä 3D reuna-kuoppa. Tulos riippuu border-color-arvon arvosta.
ridge	Määritä 3D reunakoukku. Tulos riippuu border-color-arvon arvosta.
inset	Määritä 3D sisäreunus. Tulos riippuu border-color-arvon arvosta.
outset	Määritä 3D ulkoreunus. Tulos riippuu border-color-arvon arvosta.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo:	none
Perinnäisyys:	Ei
Animaation luominen:	Ei tuettu. Katso:Animaatiot ja niiden ominaisuudet.
Versio:	CSS3
JavaScript-kieli:	object.style.borderBlockStartStyle="dotted"