如何在 ul li 列表中的 a:hover 上添加圆角边框？

Question

我有一个 WordPress 网站，其中导航中的 li 宽度会根据导航 ul li 列表中链接的宽度/长度而变化。我正在尝试为每个 li 元素添加一个圆形边框背景图像，但由于每个元素的大小不同，我不知道如何实现这一点。

如何为我的每个li 链接创建一个宽度会随着圆形边框变化的背景图像？任何帮助将不胜感激。

Answer 1

我建议从定义CSS3 rounded corners 样式开始（另请参阅here）。从长远来看，每个浏览器都应该支持这一点。

作为一种备用机制，您可以使用带有sliding door technique 的背景图片。

Answer 2

如果没有繁重的 Javascript 甚至服务器端的东西，调整背景图像的大小是不可能的。 两种解决方法（均未测试）：

仅限 CSS 2： 您可以给 li “位置：相对”，然后定位一个 DIV 或其他带有圆角和“位置：绝对”的元素。给它“left:0px;right:0px;top:0px;bottom:0px”，所以它应该总是和 li 一样大。为避免内容被元素覆盖，请给内容“位置：相对”和 z-index。

跨浏览器代码沼泽：

使用“position:absolute”和“left:0px;top:0px”、“right:0px;top:0px”等给出li position:relative和定位四个圆角图像。

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方式

优点：简单
缺点：如果关闭 javascript，则无法工作

使用Jquery 和JQuery Corner plug-in

<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

唯一可以轻松兼容所有浏览器的解决方案是将背景图像切分，并让角落成为自己的小图像。