Yahoo!用户界面博客（YUIBlog）

折叠盒的CSS边框过关

3月8日，在下午03:23 2011年由亨利Koblentz在CSS 101 的设计 ， 开发 | 8评论

这些技巧将帮助您实现设计，而不诉诸使用图像，CSS3的梯度或无关的标记。 折叠箱零line-height和height值，我们可以显示的内容框以外的内容，超过边界。

双色背景

这个例子没有包括IE 6/7的解决方法（检查IE浏览器修复这个源代码演示页 ）。

 .parent { display:inline-block; text-align: center; border: 1px solid #cecece; } .child { display:inline-block; line-height: 0; height: 0; border-top: 1em solid #ffc; border-bottom: 1em solid #fdcf46; padding:0 .6em; vertical-align:bottom; } <ul id="menuBar-A"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

列表项之间的点和管道

这个例子显示了跨浏览器的一些简单的IE修复后正常。

 ul.one, ul.two { margin-left:0; display:inline-block; *display:inline; zoom:1; height:12px; line-height:12px; padding:0; } li { float:left; display:inline; height:2px; line-height:2px; position:relative; top:.3em; } ul.two {border-left:1px solid #333;} ul.one li {border-left:2px solid #333;} ul.two li {border-right:2px solid #333;} ul.one li.first-child, ul.two li.last-child { border:0; } a { color:#000; padding:.4em .9em; *position:relative; } <div id="menuBar-B"> <ul class="us"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> </ul> <ul class="ourOffer"> <li class="services"><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> </div> 

向左和向右的三角形

这个例子没有包括IE 6/7的解决方法（检查IE浏览器修复这个源代码演示页 ）。

 #box { line-height: 0; height: 0; border: .4em solid transparent; border-left-color: #333; border-right-color: #333; padding: 0 .3em; display: inline-block; } <ul id="menuBar-C"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

IE 6和边境透明度

IE 6不支持关键字“ transparent “边框颜色。 当你使用这个值，IE 6中绘制一个黑色边框。

此解决办法是使用色度过滤器，其中显示了特定颜色的透明物体的内容 。 例如，要创建一个合适的箭头，你可以使用这条规则：

 #Box { height: 0; width: 0; border: 10px solid transparent; font-size: 0; _border-color: pink; _filter: chroma(color="pink"); border-left-color: #333; } 

字体大小的声明是针对IE 6的另一个解决方法。 它是确保此浏览器不增加框的高度。

！停止印刷机，我只是学会了一个新的技巧（谢谢中和市芳）：

神奇的[创建在IE浏览器的边框透明度设置边界式“虚线或点

---

这就是它！ 这仅仅是一个方法使用的边界，以实现图像设计。

进一步阅读

• 的正多边形研究，
• slantastic
• 偏

找到的谈话： bloglines technorati

共享和扩展： 书签del.icio.us Digg它！ | reddit！