Twitter菜单栏

时间:2009-05-18 12:56:23

标签: html css twitter

你知道Twitter菜单栏是如何圆润的。我该怎么做(在CSS?)。我也想确保它绕过我所有的菜单项。

6 个答案:

答案 0 :(得分:3)

请注意,这在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.这就是为什么,mozwebkit和{{1附加在前面。

答案 1 :(得分:1)

获取名为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中不起作用。还有其他方法。只需检查其他网站,看看他们是如何做到的。

答案 2 :(得分:0)

你想要一个元素上的圆角吗?我对此的建议是使用CSS规则:

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

在不利的一面,它不会给你在IE中的圆角,但从好的方面来说,它不会让你头疼。如果您想要跨平台,请查看jQuery Cornersthe myriad tutorials across the internet on rounded corners

答案 3 :(得分:0)

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

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

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

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

答案 4 :(得分:0)

这是一个巧妙的技巧,适用于所有浏览器,包括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

祝你好运! //马格努斯

答案 5 :(得分:-1)

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

  • 使您的商品尺寸固定,只需使用包含角落的背景图片

  • 将您的物品包裹在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>