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

Question

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

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

Answer 1

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

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

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

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

Answer 2

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

Edit: Вы могли бы взломать его в использовании outline, но есть subtle difference between outline and border.

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

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

Answer 3

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

Answer 4

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

https://stackoverflow.com/a/11179169/1468708

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