CSS outline-style — стиль контуру елемента

Властивість outline-style встановлює стиль зовнішнього контуру елемента.

На відміну від кордону елемента (наприклад, встановлено за допомогою border або пов'язаних з ним властивостей), контур елемента не займає зайвого місця, і може бути не прямокутним.

Контур завжди знаходиться над блоком, і це не впливає на положення чи розмір елементу або інших елементів.

правити

Загальний опис

правити

Нотатка

Для задання контуру зручніше використовувати універсальну властивість outline

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Властивість outline-style може отримувати 12 значень:

none

Контур не відображається. Це значення паревизначає властивість outline-width. Без задання.

автор: Svitlana

правити

hidden

Майже те саме що й none, за винятком вирішення конфліктів контурів для елементів таблиці.

автор: Svitlana

правити

dotted

Контур з точок.

автор: Svitlana

правити

dashed

Пунктирний контур.

автор: Svitlana

правити

solid

Суцільний контур.

автор: Svitlana

правити

double

Подвійний контур.

автор: Svitlana

правити

groove

Рифлений 3D контур.

автор: Svitlana

правити

ridge

Ребристий 3D контур.

автор: Svitlana

правити

inset

Урізаний (звеpxу-справа) 3D контур.

автор: Svitlana

правити

outset

Урізаний (знизу-зліва) 3D контур.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	1.2	7	12	8

Підтримка: мобільні переглядачі

Переглядач
	2	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<p>Абзац із крапчастим контуром.</p>

p {
    outline-style: dotted;
    margin: 12px;
}

<p class="a">outline-width і outline-color задані, outline-style — ні</p>
<p class="b">те саме плюс outline-style: solid</p>

p {
    padding: 10px;
    background: #eef2f7;
}
.a {
    outline-width: 4px;
    outline-color: #dd3333;
}
.b {
    outline-width: 4px;
    outline-color: #dd3333;
    outline-style: solid;
}

<div class="field-item even">
   <div id="playground-result">
      <div id="playground-property" style="padding: 10px; outline: 5px red; outline-style: none">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, quia molestiae officia voluptatem nihil sunt veniam accusantium? Aperiam eveniet, velit, pariatur minus maxime quis fuga sequi reprehenderit beatae, quaerat nesciunt?</div>
   </div>
  <p>Вибери потрібне значення для властивсті <b>outline-style</b>:</p>
   <div class="grid-x grid-margin-x">
      <div id="playground-value" class="cell medium-12 large-6">
        <label><input type="radio" name="value" value="none" checked="">none</label>
        <label><input type="radio" name="value" value="dotted">dotted</label>
        <label><input type="radio" name="value" value="dashed">dashed</label>
        <label><input type="radio" name="value" value="solid">solid</label>
        <label><input type="radio" name="value" value="double">double</label>
        <label><input type="radio" name="value" value="groove">groove</label>
        <label><input type="radio" name="value" value="ridge">ridge</label>
        <label><input type="radio" name="value" value="inset">inset</label>
        <label><input type="radio" name="value" value="outset">outset</label>
     </div>
      <div id="playground-code" class="cell medium-12 large-6">
         <pre>div {
  padding: 10px; 
  outline: 5px #e4efc7;
  outline-style: <span id="playground-code-value">none</span>;
}<div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></pre>
      </div>
   </div>
</div>

#playground-property{
  font-size: 18px;
  margin-bottom: 20px;
}
p{
  font-size: 18px;
}
pre{
  background: lightgrey;
  font-size: 16px;
}

var radios = document.querySelectorAll('#playground-value input[type="radio"]');

function changeHandler(event) {
  document.getElementById('playground-property').style.outlineStyle = this.value;document.getElementById('playground-code-value').innerText = this.value;
}
Array.prototype.forEach.call(radios, function (radio) {
  radio.addEventListener('change', changeHandler);
});

<div class="block">
	<code>
		border: 8px solid #888;<br>
		Властивість <strong>outline-style</strong> не задана<br>
	</code>
</div>
<div class="block outline">
	<code>
		border: 8px solid #888;<br>
		<strong>outline-style: dotted</strong>;<br>
	</code>
</div>

.block {
	padding: 36px;
	text-align: center;
	border: 8px solid #888;
	outline-width: 16px;
	outline-color: red;
	background-color: #eee;
	width: 300px;
	margin: 66px;
	font-size: 18px;
}
.outline{
  outline-style: dotted;
}