У меня такой li
стиль:
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}
При наведении курсора li
на границу появляется рамка без li
сдвига. Возможно ли, чтобы «граница» была невидимой?
css
transparency
border-color
Уильям Каллеха
источник
источник
Многие из вас, должно быть, приземлились здесь, чтобы найти решение для непрозрачной границы вместо прозрачной. В этом случае вы можете использовать
rgba
, гдеa
означаетalpha
.Демо
Здесь вы можете изменить
opacity
значениеborder
из0-1
Если вам просто нужна полностью прозрачная граница, лучше всего использовать
transparent
, напримерborder: 1px solid transparent;
источник
Вы можете удалить границу и увеличить отступ:
источник
<a/>
поле. Граница принадлежит элементу (следовательно, кликабельна), а заполнение принадлежит родительскому элементу.эй, это лучшее решение, которое я когда-либо испытывал .. это CSS3
используйте следующее свойство для своего div или в любом месте, где вы хотите поставить границу прозрачной
например
это сработает ..
источник
Да, вы можете использовать
border: 1px solid transparent
Другое решение - использовать
outline
при наведении (и установить границу 0), что не влияет на поток документов:NB. Вы можете установить только контур как свойство sharthand, но не для отдельных сторон. Он предназначен только для отладки, но работает хорошо.
источник
Поскольку вы сказали в комментарии, что чем больше у вас вариантов, тем лучше, вот еще один.
В CSS3 есть две разные так называемые «блочные модели». Один добавляет границу и отступ к ширине блочного элемента, а другой - нет. Вы можете использовать последний, указав
Тогда в современных браузерах элемент всегда будет иметь одинаковую ширину. То есть, если вы примените к нему границу при наведении, ширина границы не будет добавляться к общей ширине элемента; граница будет добавлена «внутри» элемента, так сказать. Однако, если я правильно помню, вы должны указать
width
явно, чтобы это работало. В данном конкретном случае это, вероятно, не вариант для вас, но вы можете помнить об этом в будущих ситуациях.источник
В этой записи блога есть способ подражания
border-color: transparent
в IE6. В приведенном ниже примере содержится исправление hasLayout, которое упоминается в комментариях к записи блога:Убедитесь, что
border-color
исправление, используемое в исправлении IE6, не используется где-либо в.testDiv
элементе. Я изменил пример сpink
на,#FEFEFE
потому что он вряд ли будет использоваться.источник
Самое простое решение - использовать
rgba
в качестве цвета:border-color: rgba(0,0,0,0);
это полностью прозрачный цвет границы.источник
Использовать прозрачное свойство
источник