თვისება outline-offset

თვისება outline-offset ადგენს გარე კონტურის - იმ საზღვრის წანაცვლებას, რომელიც არ იკავებს ადგილს. თვისების მნიშვნელობა შეიძლება იყოს ნებისმიერი ზომის ერთეული, პროცენტების გარდა. ნაგულისხმევი მნიშვნელობა: 0. დადებითი მნიშვნელობა კონტურს ელემენტიდან გარეთ წააქეზებს, უარყოფითი - შიგნით.

სინტაქსი

სელექტორი {
	outline-offset: მნიშვნელობა;
}

მაგალითი . დადებითი მნიშვნელობა

კონტური ელემენტიდან წანაცვლებულია (იგი ფონით არის გამოკვეთილი):

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

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

მაგალითი . უარყოფითი მნიშვნელობა

კონტური ელემენტის შიგნით მდებარეობს:

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

#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 სისქით ნაწილი შთანთქა):

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

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

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

თვისება outline-width,
რომელიც ადგენს კონტურის სისქეს
თვისება outline-style,
რომელიც ადგენს კონტურის სტილს
თვისება outline-color,
რომელიც ადგენს კონტურის ფერს
თვისება outline,
რომელიც არის კონტურებისთვის შემოკლებული თვისება