CSS reunanvarjon siirtymä

CSS reunanvarjon siirtymä

outline-offset Ominaisuus lisää tilaa elementin ääriviivan ja reunan välille. Elementin ja sen ääriviivan välinen tila on läpinäkyvä.

Seuraavassa esimerkissä määritetään ääriviivan ulkopuolella oleva 25px reunaviiva:

Tämä kappaleen ääriviiva on 25px ulkopuolella reunasta.

esimerkki

p {
  margin: 50px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

Kokeile itse

Seuraavassa esimerkissä näkyy, että elementin ja sen ääriviivan välinen tila on läpinäkyvä:

Tämä kappaleen ääriviivan ulkopuolella oleva reunaviiva on 25px.

esimerkki

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

Kokeile itse

Kaikki CSS-reunuksen ominaisuudet

Ominaisuus Kuvaus
outline Yhdistetty ominaisuus, joka asettaa outline-width, outline-style ja outline-color yhdessä lauseessa.
outline-color Aseta reunan väri.
outline-offset Määritä reunan ja elementin reunan tai reunan välinen tila.
outline-style Aseta reunan tyyli.
outline-width Aseta reunan leveys.