outline-offset ගුණය

outline-offset ගුණය පිටත සීමාව සඳහා ඉඩ ප්‍රමාණය නියම කරයි - එනම්, ස්ථානයක් ගන්නා නොකරන දාරයක්. මෙම ගුණයේ අගය වන්නේ ප්‍රමාණ සඳහා ඒකක වලින් ඕනෑම එකක්, සියයට නැත. පෙරනිමි අගය: 0. ධන අගයක් සීමාව මූලද්‍රව්‍යයෙන් පිටතට මාරු කරයි, ඍණ අගයක් - ඇතුලට.

වාග් රීතිය

cssතේරුම් ගන්නා {
  outline-offset: අගය;
}

නිදර්ශනය . ධන අගය

සීමාව මූලද්‍රව්‍යයෙන් ඉවතට මාරු වේ (එය පසුබිමෙන් උද්දීපනය කර ඇත):

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

css#elem {
  outline-offset: 5px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

නිදර්ශනය . ඍණ අගය

සීමාව මූලද්‍රව්‍යය තුල පිහිටයි:

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

css#elem {
  outline-offset: -10px;
  outline-width: 1px;
  outline-style: solid;
  outline-color: black;
  background-color: #e4f1ed;
  width: 300px;
  height: 100px;
}

Результат:

නිදර්ශනය . outline + border සමග ඍණ අගය

මෙවැනි සිත්ගන්නාසුලු ආචරණයක් කළ හැකිය (සීමා අතර සුදු හිඩැසේ ඝනකම කෙරෙහි අවධානය යොමු කරන්න, එය 10px වේ, 14 නොවේ, outline එහි 4px ඝනකමින් කොටසක් ගත් නිසාය):

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

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

Результат:

මෙයද බලන්න