Можете ли вы сделать границу прозрачной?

Question

В CSS есть способ сделать границу прозрачной, но поле (внутри) с границей одинаково?

Пожалуйста, смотрите по этой ссылке: http://jsfiddle.net/xiiJaMiiE/LfWBn/14/

#white_box { 
position:absolute; 
min-width:90%; 
max-width:90%; 
margin:0 auto; 
height:92%; 
top:0%; 
left:5%; 
right:5%; 
background:white; 
z-index:1; 
width:80%; 
border:5px #0F0 solid; 
} 

Я хотел бы знать, если я могу сделать зеленую границу 0,6 непрозрачности и держать белый внутри нормально.

Возможно ли это, или мне нужно сделать 2 divs сверху друг друга?

Заранее благодарен!

Answer 1

Вы могли бы просто использовать: border: 5px rgba(0, 255, 0, 0.6) solid;

UPDATED EXAMPLE

#white_box { 
    position: absolute; 
    min-width: 90%; 
    max-width: 90%; 
    margin: 0 auto; 
    height: 92%; 
    top: 0%; 
    left: 5%; 
    right: 5%; 
    background: white; 
    z-index: 1; 
    width: 80%; 
    border: 5px rgba(0, 255, 0, 0.6) solid; 
} 

В качестве альтернативы, вы можете использовать outline тоже; оба имеют разные результаты.

outline: 10px solid rgba(0, 255, 0, 0.6); 

EXAMPLE HERE

Answer 2

Здесь, если вы хотите полностью прозрачны, чем вы можете использовать border-color: transparent -

border: 5px solid transparent; 

Try in fiddel

Unfortunately, in Explorer, border-color: transparent is rendered as black. 

Или если вы вы хотите только частично прозрачную границу , вы можете использовать rgb with alpha transparency -

border: 5px solid rgba(255, 255, 255, 0.5); // 0.5 means 50% of opacity 

альфа прозрачность варьировать в диапазоне от 0 (0% непрозрачности = 100% прозрачный) и 1 (100 непрозрачности = 0% прозрачный)

Try in fiddle

Answer 3

этот ответ только добавить некоторую информацию , (3 способ: box-shadow:outset x x x ; или box-shadow: inset x x x; или background-clip)

если вы хотите непрозрачности на границах и увидеть через фон родительских контейнера, а не Mixe с фоном самого элемента, вы можете сделать цвет фона с вставка тень. http://jsfiddle.net/Y78Ap/1/ (увеличение добровольной границы ширины и добавил градиент к телу, чтобы он больше «говорить»)

html,body { 
Background-color:rgba(255,165,0,0.5); 
    background-image:linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(255,255,255,0.3)); 
} 

#white_box { 
    position:absolute; 
    min-width:90%; 
    max-width:90%; 
    margin:0 auto; 
    height:92%; 
    top:0%; 
    left:5%; 
    right:5%; 
    box-shadow:inset 0 0 0 2000px white; 
    z-index:1; 
    width:80%; 
    border: 15px rgba(0, 255, 0, 0.6) solid; 
} 

Вы можете также просто нарисовать границы с box-shadow: 0 0 5px rgba(0,255,0,0.6); вместо границы

Самый простой способ предположим be, nowdays, является фоном-клипом: http://css-tricks.com/transparent-borders-with-background-clip/