Twitter菜单栏

Question

你知道推特菜单栏是如何四舍五入的。我该怎么做(在CSS中？)。我还想确保它能显示我所有的菜单项。

Answer 1

请注意，这不会在IE中作为纯粹的CSS工作。但下面是你是如何做到的：

http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/

/* 4 rounded corners */
.all-four-rounded-corners {
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px; 
    -moz-border-radius: 10px;
    border-radius: 10px;
}

如本文所示，您还可以单独完成每个角。但是到目前为止，在CSS2中，你还不能在IE中做到这一点，因为在CSS3之前它还不是一个官方支持的CSS方法。这就是为什么在前面附加了moz，webkit和khtml。

Answer 2

获取一个名为firebug的Firefox插件。https://addons.mozilla.org/en-US/firefox/addon/1843它允许你从浏览器内部快速检查页面上的元素。

安装完成后，转到twitter.com，点击浏览器右下角的小bug图标。然后点击inspect，您可以将鼠标悬停在菜单项上以查看其标记。单击这些项目，您可以看到它们的CSS。您甚至可以更改css，它将在页面上实时更新。

这是我在twitter.com上得到的信息

HTML

<ul class="top-navigation round">
 <li>
  <a id="home_link" accesskey="h" href="http://twitter.com/home">Home</a>
 </li>
 <li>
 </li>

​

CSS

.round {
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
    }

看起来他们只是使用专有的浏览器技术来创建圆角。这在IE中不起作用。还有其他方法。只要检查其他网站，看看他们是如何做到这一点的。

Answer 3

你想让元素有圆角吗？我的建议是使用CSS规则：

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

缺点是，它不会在IE中给你圆角，但在好的一面，它不会让你头疼。如果你想跨平台，可以看看jQuery Corners或the myriad tutorials across the internet on rounded corners。