თვისება 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;
}

Результат:

იხილეთ აგრეთვე