Question

你知道Twitter菜单栏是如何圆润的。我该怎么做（在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;
}

如文章所示，您也可以单独完成每个角落。但是现在在CSS 2中，你无法在IE中执行此操作，因为它不是官方支持的CSS方法，直到CSS 3.这就是为什么，moz，webkit和{{1附加在前面。

Answer 2

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

安装完毕后，请访问twitter.com并点击浏览器右下角的小虫图标。然后点击检查，您可以将鼠标悬停在菜单项上以查看其标记。单击项目，您可以看到它们的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。

Answer 4

对于纯CSS，遗憾的是并非所有浏览器都支持它。

http://www.css3.info/preview/rounded-border/

您的另一个选择是使用图像并进行表格布局，这是一个有点老派，但将在浏览器中一致地工作。

http://redmelon.net/tstme/4corners/

Answer 5

这是一个巧妙的技巧，适用于所有浏览器，包括IE。另请注意，不需要图像。

复制/粘贴以下html代码段并另存为html文件并试用：

<head>
<style type="text/css">
<!--
#container {background: #cccccc;}
.roundtop {background: #ffffff;}
.roundbottom {background: #ffffff;}
.r1{margin: 0 5px; height: 1px; overflow: hidden; background: #cccccc;}
.r2{margin: 0 3px; height: 1px; overflow: hidden; background: #cccccc;}
.r3{margin: 0 2px; height: 1px; overflow: hidden; background: #cccccc;}
.r4{margin: 0 1px; height: 2px; overflow: hidden; background: #cccccc;}
.content {padding: 10px;}
-->
</style>
</head>

<body>
<div id="container">
 <div class="roundtop">
   <div class="r1"></div>
   <div class="r2"></div>
   <div class="r3"></div>
   <div class="r4"></div>
 </div>
<div class="content">Your content goes here ..</div>
 <div class="roundbottom">
   <div class="r4"></div>
   <div class="r3"></div>
   <div class="r2"></div>
   <div class="r1"></div>
 </div>
</div>
</body>

这是一个放大的屏幕截图，可以更好地掌握正在发生的事情。上图显示了浏览器中的结果，下图显示了以不同方式为div设置颜色的样子。

Enlarged screenshot of div(s) with rounded corners

祝你好运！ //马格努斯

Answer 6

这并不容易。至少有这些技术：

使您的商品尺寸固定，只需使用包含角落的背景图片
将您的物品包裹在3 x 3的桌子中。中心单元格是您的内容，周围的单元格包含具有您想要的角落的图像（直接或通过CSS）。
如果您的商品高度一致但宽度不一致，则可以使用双div解决方案

double div

<style type=text/css>
.ItemOuter { background-image: url('left-side-top-and-bottom-rounded-corners.png'); }
.ItemInner { background-image: url('right-side-top-and-bottom-rounded-corners.png'); background-position: top right; margin-left: 10px; }
</style>
...

<div class="ItemOuter"><div class="ItemInner">content</div></div>

Twitter菜单栏

6 个答案: