Как сделать прозрачную границу с помощью CSS?

101

У меня такой liстиль:

li{
    display:inline-block;
    padding:5px;
    border:1px solid none;
}
li:hover{
    border:1px solid #FC0;
}

При наведении курсора liна границу появляется рамка без liсдвига. Возможно ли, чтобы «граница» была невидимой?

Уильям Каллеха
источник

Ответы:

108

Вы можете использовать «прозрачный» как цвет. В некоторых версиях IE он отображается как черный, но я не тестировал его со времен IE6.

http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

Дуглас
источник
3
Что ж, он работал на IE8, Mozilla, Opera и Chrome, достаточно хорош для меня, я не пробовал его в Safari, но я не против сафари. большое спасибо!
William Calleja,
5
Да, это конкретно IE6, в котором это не работает. IE7 в порядке.
bobince
К сожалению, у меня это не сработало. Я закончил тем, что использовал псевдо-после элементов, полностью сделанных за пределами границ ... какой беспорядок!
Alex
51

Многие из вас, должно быть, приземлились здесь, чтобы найти решение для непрозрачной границы вместо прозрачной. В этом случае вы можете использовать rgba, где aозначает alpha.

.your_class {
    height: 100px;
    width: 100px;
    margin: 100px;
    border: 10px solid rgba(255,255,255,.5);
}

Демо

Здесь вы можете изменить opacityзначение borderиз0-1


Если вам просто нужна полностью прозрачная граница, лучше всего использовать transparent, напримерborder: 1px solid transparent;

Г-н Чужой
источник
И вы можете использовать этот инструмент для преобразования из шестнадцатеричного в цвет rgba ... hexcolortool.com ... где вы можете дополнительно указать шестнадцатеричный цвет в URL-адресе, например, так ... hexcolortool.com/#ffcc00
ClayRay,
32

Вы можете удалить границу и увеличить отступ:

li {
  display: inline-block;
  padding: 6px;
  border-width: 0px;
}

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}
<ul>
  <li>Hovering is great</li>
</ul>

Мэтт Эллен
источник
Ну, это сработало как шарм, я просто подумал, есть ли более чистый способ, как это сделать? если вообще возможно было иметь невидимую границу? еще раз спасибо за предложение.
Уильям Каллея,
3
Для меня это звучит как более совместимое решение
NibblyPig
Только что понял, что код работает прямо противоположно тому, как вам нужно! Исправлена. Также я бы выбрал прозрачный цвет. Я просто не знал об этом: D
Мэтт Эллен
Уменьшать границу и увеличивать отступы бесполезны, если вам, например, нужно (в моем случае) полностью интерактивное <a/>поле. Граница принадлежит элементу (следовательно, кликабельна), а заполнение принадлежит родительскому элементу.
Нико
13

эй, это лучшее решение, которое я когда-либо испытывал .. это CSS3

используйте следующее свойство для своего div или в любом месте, где вы хотите поставить границу прозрачной

например

div_class { 
 border: 10px solid #999;
 background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}

это сработает ..

Раау
источник
4

Да, вы можете использовать border: 1px solid transparent

Другое решение - использовать outlineпри наведении (и установить границу 0), что не влияет на поток документов:

li{
    display:inline-block;
    padding:5px;
    border:0;
}
li:hover{
    outline:1px solid #FC0;
}

NB. Вы можете установить только контур как свойство sharthand, но не для отдельных сторон. Он предназначен только для отладки, но работает хорошо.

НедовольныйКозел
источник
Большое спасибо! чем больше у меня вариантов, тем лучше
Уильям Каллеха
Я заметил, что Chrome игнорирует прозрачные границы в настоящее время, поэтому border: 1px solid transparent больше не работает в Chrome версии 84. Идите, рисунок
MC9000
3

Поскольку вы сказали в комментарии, что чем больше у вас вариантов, тем лучше, вот еще один.

В CSS3 есть две разные так называемые «блочные модели». Один добавляет границу и отступ к ширине блочного элемента, а другой - нет. Вы можете использовать последний, указав

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

Тогда в современных браузерах элемент всегда будет иметь одинаковую ширину. То есть, если вы примените к нему границу при наведении, ширина границы не будет добавляться к общей ширине элемента; граница будет добавлена ​​«внутри» элемента, так сказать. Однако, если я правильно помню, вы должны указать widthявно, чтобы это работало. В данном конкретном случае это, вероятно, не вариант для вас, но вы можете помнить об этом в будущих ситуациях.

ЯegDwight
источник
Это может быть один из вариантов использования прозрачной границы - вместо применения границы при наведении курсора измените ее цвет с прозрачного на то, что вы можете видеть.
DaveWalley
2

В этой записи блога есть способ подражания border-color: transparentв IE6. В приведенном ниже примере содержится исправление hasLayout, которое упоминается в комментариях к записи блога:

/* transparent border */
.testDiv {
    width: 200px;
    height: 200px;
    border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
    zoom: 1;
    border-color: #FEFEFE;
    filter: chroma(color=#FEFEFE);
}

Убедитесь, что border-colorисправление, используемое в исправлении IE6, не используется где-либо в .testDivэлементе. Я изменил пример с pinkна, #FEFEFEпотому что он вряд ли будет использоваться.

Сынок
источник
0

Самое простое решение - использовать rgbaв качестве цвета: border-color: rgba(0,0,0,0);это полностью прозрачный цвет границы.

Джейк Уилсон
источник
0

Использовать прозрачное свойство

border-color : transparent;
Прабеш Гурагаин
источник