outline | CSS — Примеры

Параграф «CSS рамка»:
border
border-radius
border-image
outline
box-shadow
Решение проблемы outline и z-index в Opera
Скачет HTML меню

Генератор outline CSS

Свойство outline (w3.org) — контур (не путать с контуром букв text-shadow). Очень похож на border.

?положительное число в любых единицах измерениях, но не в процентах

thin
medium
thick

outline-width

invert
inherit

outline-color

?положительное или отрицательное число в любых единицах измерениях, но не в процентах

inherit

outline-offset

<style>
.outline {
  outline: none;
  outline-offset: 0;
}

/* или (две записи равнозначны) */

.outline {
  outline-style: none;
  outline-width: medium;
  outline-color: #222;
  outline-offset: 0;
}
</style>

<div class="outline">содержимое блока</div>

Особенности outline

Ⅰ. outline не увеличивает коробку элемента
.....................наведите на outline.....................


<i class="outlineSpan">наведите на outline</i>

Ⅱ. при переносе строк
получается такой вот контур
интереснее всего выглядящий в IE

<i class="outlineSpan">при переносе <span style="font-size: xx-large;">строк</span><br>получается такой вот контур<br>интереснее всего выглядящий в IE</i>

Ⅲ. если у дочернего блока (потомка) position: static; или z-index ниже либо равен значению родителя, то outline родителя перекрывает его:

наведите на outline


<div class="outlineDiv"><div>наведите на outline</div></div>

Ⅳ. outline ложиться и поверх нижестоящего/вышестоящего в коде элемента. Искл. при работе со свойством position и с overflow родителя.

наведите на outline


<div class="outlineDiv2">наведите на outline</div><div>следующий</div>

Примеры

Как убрать обводку/рамку с input, textarea, ссылки a

У некоторых тегов HTML outline присутствует по умолчанию.

Нажмите на эту ссылку и вернитесь обратно. Она в Firefox приобрела такой вид. Очень удобно. Для того, чтобы удалить обводку

a {
  outline: none;
}

Поставьте курсор на поле . В Chrome оно теперь выделено (подсвечено) примерно так . Дабы избавиться от этой рамки

*:focus {
    outline: none;
}

При фокусе на input остальное пространство темнеет, становится менее выражено

Пример input:
Пример textarea:


<div class="outlineDiv2">наведите на outline</div><div>следующий</div>

CSS полупрозрачная рамка вокруг картинки

Самый простой способ на края изображения наложить полупрозрачный фон Лиса нюхает цветок

<img alt="Лиса нюхает цветок" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit_fbQT70PmEPPrIhJcEO-sr15w4tQyUS33v-SW7gaPGIXwfTKuK96Tzr942-fe1ZmQnApLa6f0GphEIDGGDfWhLxEQGCoG2bXfOMSego6DE-5vhG-7E3YzV8cnxc2Z3FqHq3x7GETSYm2/s0/x_19f2a02b.jpg" style="display: block; margin: 0 auto; outline: 20px solid rgba(255,255,255,.5); outline-offset: -20px;">

outline | CSS