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！