Как я делаю прозрачную границу с CSS?
Я имею li разработанный следующим образом:
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}
Когда я нависаю над li граница появляется, не делая liсдвиг вокруг. Действительно ли возможно иметь 'границу', это не видимо?
4 ответа
Вы можете использовать «прозрачный» как цвет. В некоторых версиях IE он отображается черным цветом, но я не тестировал его со времен IE6.
http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
Вы можете удалить границу и увеличить отступ:
li {display: inline-block; отступ: 6 пикселей; ширина границы: 0 пикселей; } li: hover {граница: 1px solid # FC0; отступ: 5 пикселей; } - Парение - это здорово
Да, вы можете использовать border: 1px solid transparent
Другое решение - использовать контур при наведении курсора (и установить границу на 0), что не влияет на поток документов:
li{
display:inline-block;
padding:5px;
border:0;
}
li:hover{
outline:1px solid #FC0;
}
NB. Вы можете установить только контур как свойство sharthand, но не для отдельных сторон. Он предназначен только для отладки, но работает хорошо.
Поскольку вы сказали в комментарии, что чем больше вариантов, тем лучше, вот еще один.
В CSS3 есть две различные так называемые "модели коробки". Одна из них добавляет границу и padding к ширине блочного элемента, а другая - нет. Вы можете использовать последнюю, указав
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
Тогда в современных браузерах элемент всегда будет иметь одинаковую ширину. То есть, если вы примените к нему границу при наведении, ширина границы не будет добавляться к общей ширине элемента; граница будет добавлена, так сказать, "внутрь" элемента. Однако, если я правильно помню, для этого нужно явно указать width. Возможно, в данном конкретном случае это не вариант, но вы можете иметь это в виду для будущих ситуаций.