Как сделать прозрачную границу с 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); полностью прозрачный цвет границы.