Двусторонняя граница CSS с внешней границей толще внутренней границы

В моей текущей работе мне необходимо создать двойную границу на контейнере. Граничный стиль: двойной; однако, мой клиент хочет, чтобы внешняя граница была толще, а внутренняя граница была нормальной толщины.

За исключением создания 2 divs, 1 вложенных внутри другого с внешним div, имеющим большую толщину, или с использованием пограничных изображений, есть ли способ сделать это с помощью CSS только с одним div? указание border-style: double; и все еще иметь возможность сделать внешнюю границу толще.

Ответ 1

Контуры включены в спецификацию CSS3 и позволяют применять как границу, так и контур к одному элементу.

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

Я использовал контуры, чтобы придать границам 2 разных цвета, изменив код, чтобы придать вашим границам 2 разных размера.

#box {
border: 1px double #000;
outline: 2px solid #699;
outline-offset: -9px;
}

Ответ 2

Нет, это невозможно. Ширина границы CSS определяет общую толщину границы, независимо от стиля границы. Я не вижу лучшего способа, чем обернуть его в другой DIV.

Изменить: Вы можете взломать его с помощью outline, но есть тонкая разница между outline и border.

border: double 4px black;
outline: solid 3px black;

(это приведет к 1px внутренней и 4px внешней границе, если вы можете это назвать)

Ответ 3

Или вы можете использовать изображение границы с этим новым материалом в CSS3, хотя оно не будет поддерживаться в большинстве используемых в настоящее время браузеров.

Ответ 4

Вы также можете использовать: перед псевдоэлементом:

fooobar.com/questions/214412/...

Чтобы вы могли иметь двойную границу с разной толщиной, например, внизу.

Ответ 5

#box {
    border: solid 4px #333;
    outline: solid 3px #333;
    outline-offset: -12px;
}

Если вы не используете двойной стиль на своей границе, вы можете иметь больше контроля. Этот метод даст полный контроль над стилями для внешней границы, внутреннего контура и пространства между ними.