Как добавить скругленные границы на a: hover в списке ul li?

Question

У меня есть сайт WordPress, где ширина li изменяется в моей навигации в зависимости от ширины / длины ссылки в моем списке ul li навигации. Я пытаюсь добавить фоновое изображение с закругленными границами к каждому из элементов li, но, поскольку каждый из них отличается по размеру, я теряюсь в том, как это реализовать.

Как мне создать фоновое изображение, которое будет меняться по ширине с закругленными границами для каждой из моих li ссылок? Любая помощь будет принята с благодарностью.

Answer 1

Я предлагаю начать с определения CSS3 закругленных углов стилей (см. Также здесь ). В конце концов, каждый браузер должен поддерживать это.

В качестве резервного механизма вы можете использовать фоновые изображения с помощью технологии раздвижная дверь .

Answer 2

Настройка размера фонового изображения невозможна без тяжелого Javascript и, возможно, даже с серверной стороны. Две альтернативные идеи (обе не проверены):

Только CSS 2: Вы можете указать li "position: относительный", а затем расположить DIV или другой элемент с закругленными углами и "position: absolute" внутри него. Дайте ему "left: 0px; right: 0px; top: 0px; bottom: 0px", чтобы он всегда был таким же большим, как li. Чтобы избежать наложения содержимого на элемент, задайте для содержимого «position :lative» и z-index.

Кросс-браузерный код болота:

Укажите положение li: относительное положение и расположение четырех закругленных угловых изображений с использованием «position: absolute» и «left: 0px; top: 0px», «right: 0px; top: 0px» и т. Д.

Answer 3

Вот техника, которую я «позаимствовал», для которой не нужны изображения!

http://blog.benogle.com/2009/04/29/css-round-corners/

Он полностью объясняет технику, чтобы вы знали, как он это делает.

Answer 4

Будущий путь

Плюсы : легко и просто
Минусы : не совместимы с IE

-moz-border-radius-topleft  / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Javascript way

Плюсы : Простой
Минусы : не работает, если JavaScript отключен

Используйте Jquery и плагин JQuery Corner

<script type="text/javascript">
$("#menuItem1").hover(function(){
       $('#menuItem1').corner(); 
});
</script>

Чистый способ CSS

Как описано в http://blog.benogle.com/2009/04/29/css-round-corners/
Плюсы : Чистая CSS
Минусы : Добавить много ненужной разметки

.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}


<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
    <div class="contentf">
        <div>Round FILL!!</div>
    </div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>

Answer 5

Единственное решение, которое будет легко совместимо со всеми браузерами повсюду, - это нарезка фонового изображения и превращение углов в их собственные маленькие изображения.