Как сделать border внутри блока css

outline-offset

Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.

Синтаксис

Значения

<размер>Задаёт расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Использование свойства outline-offset

Объектная модель

[window.]document.getElementById(» elementID «).style.outlineOffset

Как сделать border внутри блока css?

Для выполнения задачи создания обводки/border внутри блока css необходимо отказаться свойства border. По спецификации css border создается вокруг элемента.

Допустим, дизайнер создал блок высотой и шириной в 100px, задаем обводку в 1px и блок становится размером 101px на 101px. Можно задать внутренние отступы, что только ухудшит ситуацию, так как рабочая область блока, сократиться на размер padding-а (внутреннего отступа), что может привести к нарушениям дизайна. Особенно актуально при верстке эффектов фокуса и наведения.
border внутри блока правильнее создавать через свойство outline.

Пример css border внутри блока:

outline:2px solid #000; outline-offset:-4px;

В первой строке задается обводка, во второй смещение. Отрицательная цифра смещения создает border внутри блока. Единственный недостаток этого свойства — обводка создается с 4-х сторон. Задать для одной стороны невозможно.

Вёрстка. Как реализовать border внутри блока, а не на его границе? Пример в описании

Хочу избавиться от фона-картинки, градиент сделаю через box-shadow в css, но как сделать пунктирную линию?

Нужно обойтись одним тегом, чтобы потом это скормить jqueryui.com/demos/button/
Есть идеи?

• Вопрос задан более трёх лет назад
• 68276 просмотров

1 комментарий

Простой 1 комментарий

outline:1px dashed red;
outline-offset:-4px;
Решения вопроса 1
CaptainQuazar @CaptainQuazar

 body div

Так получиться должный эффект, обратите внимание, тень должна смотреть во все 4 стороны что бы не испортить фигуру.

Ответ написан более трёх лет назад
Нравится 3 2 комментария
NeOn4eG @NeOn4eG Автор вопроса
вау, похоже это то что надо…
Спасибо!
NeOn4eG @NeOn4eG Автор вопроса
Немного допилил…

min-width: 100px; background: #aa0808; border: #fff dashed 1px; border-radius: 5px; box-shadow: inset #e20b0b -1px 26px 26px -13px, 0px 1px 0px #aa0808, 0px -1px 0px #e20b0b, 1px 0px 0px #aa0808, -1px 0px 0px #aa0808; text-align: center; color: #fff; text-shadow: #393939 1px 1px 0px; padding: 4px 10px 5px 12px;

Получилось вот что 🙂

Ответы на вопрос 3
outline:1px dashed red;
outline-offset:-4px;
Ответ написан более трёх лет назад
Нравится 11 1 комментарий

Лучшее решение

Дополню CaptainQuazar. 4 тени не нужны, достаточно одной.

  body div 

Ответ написан более трёх лет назад
Нравится 5 1 комментарий
CaptainQuazar @CaptainQuazar
Спасибо большое, а я и забыл о четвертом показателе.
outline: 1px solid #color;
Ответ написан более трёх лет назад
Нравится 2 4 комментария
упс.
dashed, а не solid.
NeOn4eG @NeOn4eG Автор вопроса

вроде не то, границу рисует без отступа от края блока. отличается от border только тем, что занимает место внутри самого блока, а не прибавляет снаружи…

NeOn4eG @NeOn4eG Автор вопроса
хотя… может ну его нафиг, этот 1 пиксель отступа

а, я тогда наверное не так понял, что за отступ нужен.
смысл outline тут в том, что на фоне этой рамки будет красный градиент, а не черный цвет (как снаружи).

Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +1 ещё

Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?

• 1 подписчик
• 3 часа назад
• 28 просмотров

outline-offset¶

Свойство outline-offset устанавливает расстояние между рамкой, созданной с помощью свойства outline , и краем или границей элемента добавленной через border .

Демо¶

Синтаксис¶

1 2 3 4 5 6 7 8

/* values */ outline-offset: 3px; outline-offset: 0.2em; /* Global values */ outline-offset: inherit; outline-offset: initial; outline-offset: unset; 

Значения¶

Задаёт расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.

Значение по-умолчанию: 0

Применяется ко всем элементам

Спецификации¶

• CSS Transitions
• CSS Basic User Interface Module Level 3

Поддержка браузерами¶

Can I Use outline? Data on support for the outline feature across the major browsers from caniuse.com.

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

 html> head> meta charset="utf-8" /> title>outline-offsettitle> style> .clue  background: url(/example/image/leather.jpg); /* Фоновый рисунок */ outline: 2px dashed rgba(255, 255, 255, 0.8); /* Пунктирная рамка */ outline-offset: -10px; /* Выводим рамку внутри элемента */ padding: 10px; /* Поля */ min-height: 100px; /* Минимальная высота */ > style> head> body> div class="clue">div> body> html>