CSS border-inline-end-width ominaisuus

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

Määrittely ja käyttö

border-inline-end-width Asetetaan ominaisuus elementin reunan leveys rivin lopussa.

Huomaa:Jotta border-inline-end-width Ominaisuuden toiminnan border-inline-end-style ominaisuudet.

CSS border-inline-end-width ominaisuudet ovat samanlaisia kuin CSS-ominaisuuksien border-bottom-width,border-left-width,border-right-width ja border-top-width Erittäin samanlaiset, mutta border-inline-end-width Ominaisuus riippuu sisäisestä suunnasta.

Huomaa:liittyvät CSS-ominaisuudet writing-mode,text-orientation ja direction Määrittää sisäisen suunnan. Tämä vaikuttaa rivin alkupäässä ja lopussa olevaan sijaintiin sekä border-inline-end-width Ominaisuuden tuloksen. Englanninkielisillä sivuilla sisäinen suunta on vasemmalta oikealle, lohkosuunta alas.

Esimerkki

Esimerkki 1

Aseta sisäisen suunnan lopun reunan leveys:

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

Kokeile itse

Esimerkki 2: Yhdistettynä writing-mode-ominaisuuden kanssa

Sisäisen suunnan lopussa olevan reunan sijainti vaikuttaa writing-mode Ominaisuuden vaikutus:

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

Kokeile itse

Esimerkki 3: Yhdistettynä direction-ominaisuuden kanssa

Sisäisen suunnan alkupäässä ja lopussa olevan reunan sijainti vaikuttaa direction Ominaisuuden vaikutus:

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

Kokeile itse

CSS-kieli

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

Ominaisuusarvo

Arvo	Kuvaus
medium	Määrittää keskikokoisen reunan. Oletusarvo.
thin	Määrittää ohuen reunan.
thick	Määrittää paksun reunan.
length	Mahdollistaa reunan paksuuden määrittämisen. Katso:CSS yksiköt.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit	Perii tämän ominaisuuden isältään. Katso: inherit.

Tekninen tarkistus

Oletusarvo:	medium
Perinnäisyys:	Ei
Animaatioiden luominen:	Tuki. Katso:Animaatiotunnukset.
Versio:	CSS3
JavaScript-kieli:	object.style.borderInlineEndWidth="10px"