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

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

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

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

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

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

Многие из вас, должно быть, приземлились здесь, чтобы найти решение для непрозрачной границы вместо прозрачной. В этом случае вы можете использовать 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;

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

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

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}

<ul>
  <li>Hovering is great</li>
</ul>

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

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

например

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

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

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

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

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

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

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

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

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

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

В этой записи блога есть способ подражания 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потому что он вряд ли будет использоваться.

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

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

border-color : transparent;