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

Question

У меня есть li в следующем стиле:

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

, например

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

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

Answer 5

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

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

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

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

Answer 6

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

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

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

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

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

Answer 8

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

border-color : transparent;

Answer 9

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