Question

我有一个WordPress网站，我的导航中的li宽度会根据导航ul li列表中链接的宽度/长度而变化。我试图为每个li元素添加一个圆形边框背景图像，但由于每个元素的大小不同，我对如何实现它感到很遗憾。

如何为每个li链接创建一个宽度会改变的背景图片？任何帮助将不胜感激。

Answer 1

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

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

Answer 2

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

仅限CSS 2：你可以给li“position：relative”然后定位一个DIV或其他带圆角的元素和“position：absolute”。给它“left：0px; right：0px; top：0px; bottom：0px”所以它应该总是和li一样大。要避免内容被元素覆盖，请提供内容“position：relative”和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

唯一能够与所有浏览器轻松兼容的解决方案是将背景图像切片并使角落成为自己的小图像。

Answer 5

未来之路

优点：简单明了缺点：非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>

如何在a列表中添加圆形边框：悬停在ul li列表中？

5 个答案:

未来之路

Javascript方式

纯CSS方式