outline-style සම්පත්තිය

outline-style සම්පත්තිය අවකාශයක් ගන්නා නොවන බාහිර සීමාවේ ශෛලිය නියම කරයි.

වාක්ය රචනය

cssතේරීම් කරු {
  outline-style: අගය;
}

අගයන්

පෙරනිමි අගය: none.

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

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

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

Результат:

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

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

css#elem {
  outline-width: 1px;
  outline-style: dotted;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

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

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

css#elem {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

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

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

css#elem {
  outline-width: 3px;
  outline-style: ridge;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

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

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

css#elem {
  outline-width: 3px;
  outline-style: double;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

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

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

css#elem {
  outline-width: 3px;
  outline-style: groove;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

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

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

css#elem {
  outline-width: 3px;
  outline-style: inset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

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

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

css#elem {
  outline-width: 3px;
  outline-style: outset;
  outline-color: black;
  width: 300px;
  height: 100px;
}

Результат:

තවද බලන්න