CSS border-inline-start-width ominaisuus

Edellinen sivu border-inline-start-style
Seuraava sivu border-inline-style

Määrittely ja käyttö

border-inline-start-width Ominaisuuden asettamisen elementin reunanleveys rivin alussa.

Huomioitavaa:Jotta border-inline-start-width Ominaisuus astuu voimaan, on asetettava border-inline-start-style Ominaisuudet.

CSS:n border-inline-start-width Ominaisuudet ovat samanlaisia kuin border-bottom-width,border-left-width,border-right-width ja border-top-width Ominaisuudet ovat hyvin samanlaisia, mutta border-inline-start-width Ominaisuus riippuu sisäisestä suunnasta.

Huomioitavaa:liittyvät CSS-ominaisuudet writing-mode,text-orientation ja direction Määrittää sisäisen suunnan. Tämä vaikuttaa rivejen alkuun ja loppuun, sekä border-inline-start-width Ominaisuuden vaikutus. English pages, the inline direction is from left to right, and the block direction is downwards.

Esimerkki

Esimerkki 1

Aseta sisäisen suunnan alussa olevan reunan leveys:

div {
  border-inline-start-style: solid;
  border-inline-start-width: 10px;
}

Kokeile itse:

Esimerkki 2: Yhdistettynä writing-mode-ominaisuuteen

Reunuksen sijainti sisäisen suunnan alussa riippuu writing-mode Ominaisuuden vaikutus:

div {
  border-inline-start-style: solid;
  writing-mode: vertical-rl;
  border-inline-start-width: 5px;
}

Kokeile itse:

Esimerkki 3: Yhdistettynä direction-ominaisuuteen

Reunuksen sijainti sisäisen suunnan alussa ja lopussa riippuu direction Ominaisuuden vaikutus:

div {
  direction: rtl;
  border-inline-start-width: 10px;
}

Kokeile itse:

CSS-kieli

border-inline-start-width: medium|thin|thick|length|initial|inherit;

Ominaisuuden arvo

Arvo	Kuvaus
medium	Määrittää keskipaksun reunan. Oletusarvo.
thin	Määrittää ohuen reunan.
thick	Määrittää paksun reunan.
length	Mahdollistaa reunan paksuuden määrittämisen. Katso:CSS yksiköt.
initial	Asettaa tämän ominaisuuden oletusarvoon. Katso: initial.
inherit	Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo:	medium
Perinnäisyys:	Ei
Animaation tekeminen:	Tuen. Katso:Animaatioon liittyvät ominaisuudet.
Versio:	CSS3
JavaScript-kieli:	object.style.borderInlineStartWidth="10px"