Возможно ли иметь прозрачную рамку?

У меня есть этот код для моей границы:Возможно ли иметь прозрачную рамку?

border: 1px solid #CCC;

Можно ли иметь несколько подобных CSS, где граница имеет ширину, но это не видно. Другими словами, если есть синий фон, то это будет отображаться прямо через границу?

источник

2016-08-02 Samantha J T Star

почему бы вам не избавиться от границы все вместе, то, или установить его в 0px. Не забывайте, что у вас есть css padding, если необходимо – lucas

Вы пытались увидеть, что происходит? –

'border: 1px solid transparent;' или 'border: 1px solid rgba (0,0,0,0);' with {background-clip: content-box; 'не работает? –

Вы можете просто установить border-color в transparent

источник

2016-08-02 19:20:17

'translucent' не существует как ключевое слово в пределах Тип CSS 'color'. – Shaggy

@Shaggy хм ... ты прав, почему-то я, хотя это тоже было ключевое слово. благодаря –

Маржа занимает пространство и является прозрачным. Пространство, занимаемое полем, находится снаружи элемента, поэтому он принимает цвет фона родительского элемента. Если вы хотите, чтобы это было пространство с тем же цветом фона, что и элемент, который вы изменяете, вы хотели бы использовать отступы.

Это отличный ресурс, который показывает вам, что вы, вероятно, хотите: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

источник

2016-08-02 19:19:27 Taylor

Модель окна в хромовом инспекторе может быть полезна также для понимания того, как именно создается ваш элемент. – WookieCoder

Да, это возможно, чтобы иметь прозрачную границу. Просто используйте RGBA цвет Defination так:

border: 10px solid rgba(50,50,50,.5);

Последнее значение 0,5 от 0 до 1, и это значение непрозрачности (или альфа) для цвета

Рабочий пример (посмотреть, как прозрачность границы изменяется на зависание): jsFiddle

источник

2016-08-02 19:20:27 Shaunak

Да, это вполне возможно.

Обычно прозрачная рамка будет показывать фоновый цвет элемента под ним.

Это можно преодолеть путем ограничения фона в «коробки», держащего содержание обивка & с использованием background-clip:padding-box (или необязательно content-box, который будет обрезать фон только к области содержимого).

Затем вы можете добавить коробку (например), которая будет сидеть снаружи прозрачная рамка.

body { 
 
    background: linear-gradient(to bottom, orange, pink); 
 
} 
 
div { 
 
    width: 200px; 
 
    height: 200px; 
 
    box-sizing: border-box; 
 
    background: rebeccapurple; 
 
    margin: 2em auto; 
 
    border: 10px solid transparent; 
 
    box-shadow: 0 0 5px 5px green; 
 
    background-clip: padding-box; 
 
}

<div></div>

источник

2016-08-02 19:38:03

Возможно ли иметь прозрачную рамку?

ответ

Смежные вопросы