你知道Twitter菜单栏是如何圆润的。我该怎么做(在CSS?)。我也想确保它绕过我所有的菜单项。
答案 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.这就是为什么,moz
,webkit
和{{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 Corners或the myriad tutorials across the internet on rounded corners。
答案 3 :(得分:0)
对于纯CSS,遗憾的是并非所有浏览器都支持它。
http://www.css3.info/preview/rounded-border/
您的另一个选择是使用图像并进行表格布局,这是一个有点老派,但将在浏览器中一致地工作。
答案 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设置颜色的样子。
祝你好运! //马格努斯答案 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>