CSS: разделительный ящик границы цвета

Question

Я пытаюсь создать коробку, и я хочу, чтобы каждая строка/div была полностью прозрачной в середине и непрозрачной по краям. (В изображении, обведенные части должны быть прозрачными ...) я написал что-то вроде этого:

.box { 
    height: 100px; 
    width: 100px; 
    border-left: solid green; 
    border-right: solid green; 
    border-top: solid red; 
    border-bottom: solid red; 
} 

, но, конечно, это не дает мне результат я хочу .... Я не могу понять каким-либо образом исправить эту непрозрачную-прозрачную проблему .. Любая помощь? Заранее спасибо!

Answer 1

Вы должны сделать свои границы с помощью градиента в конечном счете: (untill border gradient is avalaible through all major browser ... chrome can do it for ages, FF still not)

.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    padding:3px; 
 
    
 
    background: 
 
    linear-gradient(to left, red 33.33%, transparent 33.33%, transparent 66.66%, red 66.66%) top left no-repeat, 
 
    linear-gradient(to left, red 33.33%, transparent 33.33%, transparent 66.66%, red 66.66%) bottom left no-repeat, 
 
    linear-gradient(to top, green 33.33%, transparent 33.33%, transparent 66.66%, green 66.66%) top left no-repeat, 
 
    linear-gradient(to top, green 33.33%, transparent 33.33%, transparent 66.66%, green 66.66%)top right no-repeat; 
 
    background-size: 100% 3px, 100% 3px, 3px 100%, 3px 100%; 
 
}

<div class="box"></div>

Box-тень на коробке известного размера может сделать некоторые вещи тоже:

.boxbis { 
 
    margin: 3em; 
 
    height: 200px; 
 
    width: 200px; 
 
    background: gray; 
 
    box-shadow: 70px 70px 0 -60px turquoise, 70px -70px 0 -60px pink, -70px 70px 0 -60px tomato, -70px -70px 0 -60px orange, inset 0 0 0 3px white 
 
}

<div class="boxbis"> 
 
    <div>