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

У меня есть li в следующем порядке:

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

Когда я наводил курсор на li, рамка появляется без смещения li. Возможно ли иметь "границу", которая не видна?

Ответ 1

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

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

Ответ 2

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

    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

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

Ответ 4

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

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

например.

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

это будет работать.

Ответ 5

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

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

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

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

Ответ 6

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

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

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

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

Ответ 7

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

Ответ 8

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