outline — offset
Свойство outline — offset устанавливает расстояние между фактическим краем элемента и внутренним краем обводки, заданной при помощи outline .
Пример
Скопировать ссылку «Пример» Скопировано
div outline: 3px dotted #333; outline-offset: -5px;>div outline: 3px dotted #333; outline-offset: -5px; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
В качестве значения можно указать положительное или отрицательное число в любых доступных единицах измерения. Если значение отрицательное, то обводка будет отображаться внутри элемента.
Если свойство outline — offset не прописано или ему задано значение 0 , то обводка будет располагаться вплотную к рамке (свойство border ) или границе элемента.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Расстояние между границей элемента или его рамкой и обводкой прозрачное. Нет возможности его закрасить.
Как передвинуть border у любого элемента
Коллеги, возник чисто дизайнерский вопрос оформления кода.
Вот у нас есть на странице элемент с border и вопрос состоит в том КАК ЖЕ ДВИГАТЬ BORDER В CSS?!
Знаю что можно так, но мне такой вариант не подходит:
.selector-block { border-bottom: 1px solid #000; padding-bottom: 8px; }
Как прикрутить анимацию для элемента border на wordpress
Есть сайт, у него есть блоки, созданные в плагине pagebuilder by siteorigins. Как можно прикрутить.
CSS border-right как убрать крайний правый border
делаю сайт http://medi-clinic.ru и столкнулся с такой проблемой, в меню пункты разделены рамкой.
Как узнать Handle любого элемента?
1)Народ как в своей(неважно) узнать Handle любого элемента.? 2)Как получит Handle чужого окна.
Как вернуть тип переменной и любого другого элемента программы?
Есть такой примитивный код. #include "stdafx.h"//должна быть в начале #include <conio.h>.
Сообщение было отмечено gogolik как решение
Решение
div{width:100px; background-color:#dddd00; height:100px; padding:1px} div::after{display:block;width:100px; height:100px; background-color:transparent; content:''; margin-left:20px; margin-top:20px; border:1px solid black}
Добавлено через 2 минуты
Чтобы можно было создавать такой эффект для блока любых размеров, стили для after предлагаю генерировать на JS.
Возможно также, следует смотреть в сторону теней.
Сообщение от CyberPaladin 
Сообщение от CyberPaladin
.selector-block { border-bottom: 1px solid #000; padding-bottom: 8px; background-clip:content-box; }
Сообщение от DrType
Сообщение от DrType
Когда это писал, думал о том, как бы приспособить стили after под деформации блока. Скажем, чтобы after имел всегда такой же border-radius , такое же значение transform и т. д.
Спасибо всем, действительно я понял что это не так сложно. Оба варианта, хороши! Но, все же первый вариант, более естественный и более совместим со старыми браузерами.
Как написать рекурсивную функцию подсчета вхождения любого элемента?
Здравствуйте. Читаю книгу — Грэм. Ansi Common lisp Задача — "Предложите итеративное и.
Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?
Как поставить иконку кругом в центре border-bottom без фона border-bottom внутри круга?Чет.
Получение имени элемента Border
Доброго времени суток. Ребят, у меня возникла ситуация, решения которой я пока не могу найти. У.
Как узнать margin-left любого элемента от главного окна окна браузера?
причем не важно какую вложенность имеет элемент сам элемент, т.е. в скольких контейнерах он бы не.
border
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .
Синтаксис
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.
Рис. 2. Применение свойства border
Объектная модель
[window.]document.getElementById(» elementID «).style.borderБраузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .
Свойство outline-offset
От автора: свойство outline-offset в CSS сдвигает внешнюю обводку с края рамки элемента на указанную величину. Обводка (не рамка) не занимает места на странице (как абсолютно позиционированные элементы), поэтому ее можно сдвинуть на любое значение, и она никак не повлияет на положение или раскладку окружающих элементов.
Обводка задается через свойство outline и часто используется для создания кольца фокусировки для доступности. Свойство outline-offset позволяет изменять положение кольца фокусировки.
Значения
Свойство outline-offset принимает один тип значений, длину:
Онлайн курс по JavaScript
Научитесь создавать приложения со сложными интерфейсами
Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.
любая другая валидная длина в заданных единицах измерения (в том числе отрицательные значения).
Обратите внимание, что outline-offset, как и outline-width, не принимает значения в процентах.
Позиционирование обводки
По умолчанию обводка элемента рисуется моментально вокруг рамки (или вокруг того места, где отрисовывается рамка, если рамка задана). Поэтому есть техническая возможность объединить обводку и рамку для создания эффекта двух рамок:
С помощью outline-offset можно изменить положение обводки относительно края рамки. Поиграйтесь с демо ниже, в нем можно интерактивно изменить сдвиг обводки с помощью слайдера. Значение сдвига отображается на странице по время сдвига слайдера:
Как уже было сказано, свойство outline-offset принимает отрицательные значения. Отрицательные значения сдвигают обводку в противоположную сторону (к центру элемента), как показано в интерактивном демо ниже. Обратите внимание, что обводка начинается на -40px:
Заметка: если открыть демо сверху в Firefox, то сначала обводка отобразится корректно, но когда вы начнете двигать слайдер, обводка начнет дергаться и займет неправильное положение. Скролинг элемента за пределы видимости и обратно вынуждает браузер перерисовывать обводку в неправильном месте. Баг замечен только в Firefox.
Не входит в сокращение outline
Как и свойство border, свойство outline является сокращением и представляет три свойства: outline-color, outline-style и outline-width.
Свойство outline-offset не используется в сокращениях, поэтому его необходимо объявлять отдельно от самой обводки.
Поддержка в браузерах
Данные взяты с Caniuse. За более подробной информацией перейдите на сайт. Цифра указывает на то, что свойство поддерживается в этой версии и выше.
Индикатор «partial» для IE означает, что IE не поддерживает outline-offset, но поддерживает сокращение outline и три его свойства.
Помимо упомянутого в разделе «позиционирование обводки» бага есть еще один баг в Firefox. Обводка неправильно рисуется, когда у элемента есть дочерний элемент, перекрывающий границы родителя (например, из-за отрицательных margin’ов или абсолютного позиционирования). Поэтому outline-offset будет относиться к расширенной границе, созданной дочерним элементом, а не родителем. Чтобы лучше понять, смотрите CodePen, эту ветку Stack Overflow и баг репорт (благодарим читателя Matt Vanes за отправку бага).
Автор: Louis Lazaris
Онлайн курс по JavaScript
Научитесь создавать приложения со сложными интерфейсами
Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.
Редакция: Команда webformyself.