1

你知道 Twitter 菜单栏是如何圆润的。我该怎么做（在 CSS 中？）。我还想确保它围绕我所有的菜单项。

4

5 回答 5

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 3 之前不是官方支持的 CSS 方法。这就是为什么 , moz,webkit和khtml附加在前面的原因。

于 2009-05-18T13:00:40.793 回答
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 中不起作用。还有其他方法。只需检查其他站点，看看他们是如何做到的。

于 2009-05-18T13:07:59.110 回答
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 的外观。

带有圆角的 div 的放大屏幕截图

祝你好运！//马格纳斯

于 2009-05-18T17:06:51.437 回答
0

您想要元素上的圆角吗？我的建议是使用 CSS 规则：

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

不利的一面是，它不会在 IE 中给你带来圆角，但从好的方面来说，它不会让你头疼。如果您想要跨平台，请查看jQuery Corners或Internet 上有关圆角的无数教程。

于 2009-05-18T13:01:42.260 回答
-1

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

  • 使您的物品具有固定尺寸，并仅使用包含角落的背景图像

  • 将您的物品包装在 3 x 3 的桌子上。中心单元格是您的内容，周围的单元格包含具有您想要的角的图像（直接或通过 CSS）。

  • 如果您的项目高度一致但宽度不一致，则可以使用双 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>
于 2009-05-18T13:06:04.123 回答