1

Всем привет. Верстаю сайт. Создаю веб-дизайн для сайта и столкнулся с такой проблемой, что необходимо сделать прозрачную обводку border div блока. Такой вариант нужен, так как фон динамичный и обводка блоков должна подходить под фон.

Первое, что пришло в голову, это сделать новый блок под основным блоком, ему задать background-image картинку png формата с прозрачностью 50%. нижний блок сделать шире и выше на 2 пх. После с помощью margin-top: -1px; margin-left: -1px; сместить нижний блок.

Вариант работающий. Но при помощи resize браузера происходят баги - смещение нижнего блога в произвольную сторону. Так же, мне кажется, этот метод довольно не удобный.

Как можно реализовать прозрачную обводку. Заранее спасибо.

3 ответа 3

4

Должно работать:

.roundedBox 
{
   background: white;
   border: 20px solid rgba(0,0,0,0.3);

    -moz-background-clip: border;     
    -webkit-background-clip: border;  
    background-clip: border-box;

    -moz-background-clip: padding;     
    -webkit-background-clip: padding; 
    background-clip: padding-box;

    -moz-background-clip: content;     
    -webkit-background-clip: content;  
    background-clip: content-box;      
}
1
  • Спасибо, конечно. Но сделал альтернативный и РАБОТАЮЩИЙ вариант: box-shadow: 0 0 1px rgba(0, 0, 0, 0.80); 29 мар 2012 в 16:07
1
border-color:transparent;
1
  • Необходима полупрозрачность 29 мар 2012 в 16:27
-1
.dropdown-table {border: 1px solid #ccc transparent;}
1
  • 1
    А вы можете ответить более развёрнуто? 26 янв 2017 в 6:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.