轉載 – 微妙的圓角參數 純CSS圓角Tab

Tab能算的上是網頁裡最為常見的組件，不論是作為內容切換，還是直接作為導航，形形色色的Tab扮演著各種互動角色。既然是重要的互動角色，那麼無論其顏色還是形狀都關乎整個互動過程——圓角是有意義的，在視覺上把Tab和其他分隔元素區別開來是必要的，就如同圓角按鈕一樣——可能很多時候圓角按鈕都與整個設計風格格格不入，但卻是必須的，因為互動元素的凸顯比整個設計渾然一體更為重要。

在IE67日漸邊緣的如今，2012可能是前端重心轉移最為明顯的一年。於此也就不去考慮過時瀏覽器的相容性了，對於它們，能看看內容就已經不錯了，管它美不美觀錯不錯位，時代在進步，往前看才不至於失業。

今天琢磨了會寫了下面這樣一個CSS圓角Tab，和網上流行的圓角Tab不同之處在於：Tab底部也使用圓角過渡。

我簡單製作了一個DEMO，列出了HTML結構和CSS：

Demo

為達到底部使用圓角過渡的目的，關鍵就是下面兩點：

1. border-radius 的使用時顯而易見的，這個屬性在所有現代瀏覽器中工作良好，並且在無論是Firefox還是Chrome的更新裡，都不再需要首碼。
2. 由於Tab下沿的圓角無法填補，需要用 li 的虛擬元素來定位填補，同時還需要 a 的虛擬元素來定位覆蓋隱藏Tab下沿的邊線。

具體結構我繪製了一張框圖，感覺上這種圓角的參數很微妙…

代碼裡面值得一提的可能只有一條：

   1: .top-nav li.current:after{

   2:     content:"\200B";

   3:     position:absolute;

   4:     display:block;

   5:     width:100%;

   6:     left:0;

   7:     bottom:-5px;

   8:     border-bottom:1px solid #fff;

   9: }

那就是 content:"\200B";。其實之前的再談清除浮動 裡也已經提到，這個 U+200B 字元是一個“零寬度空白”，其本身就不可見，所以也就不需要在使用 visibility:hidden; 來隱藏內容。

本文來自：葵中劍部落格