травление границы вокруг коробки

Question

У меня есть окно, в котором я создал «травление» вертикальную линию, помещая #bbb линию и #fff линии рядом друг с другом с помощью CSS:

div#product_details_separator { 
    height:100px; 
    width:0px; 
    border-left:1px solid #bbb; 
    border-right:1px solid #fff; 

протравленной Вертикали Линия:

Кто-нибудь знает, как я могу передать всю рамку вокруг коробки тем же самым травлением?

Answer 1

Для достижения этого эффекта вы можете применить box-shadow. See the DEMO

CSS

.box { 
    border: 1px solid #fff; 
    box-shadow: 0 0 0 1px #bbb; 
} 

Answer 2

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

border: 1px solid #bbb; 
outline: 1px solid #fff; 

Answer 3

У вас есть несколько интересных (и редко используемые) стилей, чтобы установить на границе w3c doc

Комбинируя их, можно добиться несколько интересных вариантов по вашему запросу

Обратите внимание, что серый цвет цвета вычисляются автоматически. Смотрите также 4-й пример, для достижения специальных эффектов, которые отличаются от стандартных

div { 
 
    width: 100px; 
 
    height: 80px; 
 
    display: inline-block; 
 
} 
 
.one { 
 
    border: groove 20px lightblue; 
 
} 
 
.two { 
 
    border: ridge 20px lightgreen; 
 
} 
 
.three { 
 
    border: inset 20px tomato; 
 
} 
 
.four { 
 
    border-top: groove 20px tomato; 
 
    border-left: groove 20px tomato; 
 
    border-right: ridge 20px tomato; 
 
    border-bottom: ridge 20px tomato; 
 
}

<div class="one"></div> 
 
<div class="two"></div> 
 
<div class="three"></div> 
 
<div class="four"></div>