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

Question

У меня есть li стиль следующим образом:

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

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

Answer 1

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

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

Answer 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>

Answer 3

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

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

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

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

Answer 4

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

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

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

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

Answer 5

This blog entry имеет способ подражать 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 6

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

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

например

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

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

Answer 7

Многие из вас должны приземляться здесь, чтобы найти решение для непрозрачной границы вместо прозрачной. В этом случае вы можете использовать rgba, где a означает alpha.

.your_class { 
    height: 100px; 
    width: 100px; 
    margin: 100px; 
    border: 10px solid rgba(255,255,255,.5); 
} 

Demo

Здесь вы можете изменить opacity в border от 0-1

---

Если вы просто хотите полную прозрачную границу, то лучше всего использовать это transparent, как border: 1px solid transparent;

Answer 8

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