Как сделать прозрачную границу с CSS?
у меня есть li
оформлен следующим образом:
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}
когда я зависаю над li
граница появляется без создания li
' s shift вокруг. Возможно ли иметь невидимую "границу"?
8 ответов
вы можете использовать "прозрачный", как цвет. В некоторых версиях 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);
полностью прозрачный цвет границы.