Outline-ominaisuus

Ominaisuus outline asettaa värin, tyypin ja paksuuden ulkoiselle ääriviivalle (reunus, joka ei vie tilaa) kaikille sivuille yhtä aikaa, mutta toisin kuin border tällainen reunus ei laajenna elementtiä. On lyhenne-ominaisuus kohteille outline-width, outline-style ja outline-color (mutta ei outline-offset).

Syntaksi

cssvalitsija {
  outline: paksuus tyyppi väri;
}

Ominaisuuksien järjestyksellä ei ole väliä.

Esimerkki . Vain outline

html<div id="elem"></div>

css#elem {
  outline: 1px solid black;
  width: 300px;
  height: 100px;
}

Результат:

Esimerkki . Outline- ja border-ominaisuudet yhdessä

outline:n reunus tulee ulkopuolelle, ja border:n reunus tulee sisäpuolelle:

html<div id="elem"></div>

css#elem {
  outline: 4px solid green;
  border: 4px solid red;
  width: 300px;
  height: 100px;
}

Результат:

Katso myös