Граничит с непрозрачностью?

Question

Как бы вы сделали границы с непрозрачностью в CSS?RGBA цвета не работают для меня ...

JSFiddle говорит само за себя.

На границе есть темные углы и фонэлемент виден позади него вместо других элементов позади него.

Спасибо.

Answer 1

Возможно, есть лучший способ, но это работает:

Демо-версия

По сути, просто используйте обертку div с rgba, установленным в качестве фона.

HTML:

<div id="boxOuter">
    <div id="box">THANK YOU!</div>
</div>

CSS:

#box{
    background-color:#ccc;font-weight:bold;
    text-align:center;
    line-height:100px;
    height:100px;
    vertical-align:middle;
    font-size:20px;
}
#boxOuter {
    background: rgba(0,0,0,0.5); width:300px; padding: 10px;
    margin-left:25px;
}

Прочтите комментарии к этому ответу, чтобы узнать, как заставить этот метод (rgba) работать со старыми браузерами.

---

Способ сделать это без использования оболочки:

Используйте outline вместо border, это выглядит приемлемо:

outline: 10px solid rgba(0,0,0,0.5)

Live Demo (это ваш точный код, с одним измененным словом)

(я не рассматриваю IE здесь в малейшей степени)

---

Проверьте эту статью:

* ** тысяча пятьдесят-дв ** тысячи пятьдесят-три 1 054 * -tricks.com / прозрачно-граница-с-фон-клипом / * +1055 *

Answer 2

Я думаю, что первый ответ - лучший, хотя вы можете использовать изображения в границах, попробуйте использовать изображение в формате png с прозрачностью (через фотошоп), используйте свойство border-image, существует так много способов его использовать, что вы можете найти другой стильвы предпочитаете в исследовании.

http://www.css3.info/preview/border-image/