CSS：before和after實現寬度自適應的圓角邊框效果

1. 目標

一個登入後的個人資訊顯示條，最終要實現的效果如所示：

2. 分析

這個顯示條的特點是：使用者的使用者名稱和積分可能會佔據不同的寬度，這樣會導致整個邊框的寬度不同。邊框的顏色是用的漸層色，上深下淡，所以現階段還只能用切圖的方法來做。這要怎麼實現呢？辦法很多。綜合考慮，覺得將邊框的左側、右側、中間平鋪部分各切出4px，形成一個4*75的PNG圖片，用CSS來調整background-position的辦法比較靠譜，既能實現自動平鋪，又可滿足左右圓角的要求。切圖如下：

3. HTML結構

由於是幾個超連結的並排顯示，所以選擇用ul li的組合，li裡面當然用a標籤了。

4. CSS實現

由於對before和after這兩個虛擬元素的屬性不是特別瞭解，一開始我將before和after加到了ul標籤上，並且ul, ul:before, ul:after都用了左浮動，ul寬度設定為100%，ul:before, ul:after則都用切圖的寬度4px。想當然地，這樣應該可以成功了吧？但是實際上行不通。出來的效果總感覺不對，如所示，可以看到，圓角的兩邊出現了本不應該有的背景。

思考之後，發現原來這是由於ul:before, ul:after原來只會出現在ul的內部，即使將display設定為block，也並不能使這兩個虛擬元素跳出ul的框框，成為其外面的元素。在CSS教程中對這兩個虛擬元素是這樣描述的：

W3SCHOOL：預設地，這個虛擬元素是行內元素，不過可以使用屬性 display 改變這一點。

但是，這條描述沒有說明的是，這種display的改變改變不了的一個事實是：其父元素仍然是其所附加到的元素。“紙上得來終覺淺，絕知此事要躬行”，說得就是這。

於是修正的辦法就出來了，將偽類加到ul上不行，加到ul的父節點上不就OK了？

實驗之後，果然就出來了最終的效果。興奮至極，聊以紀念。

本文來自pinocchioatbeijing（專註前端技術 追求至美生活 以文會友）在部落格園的部落格，文章URL：http://www.cnblogs.com/pinocchioatbeijing/archive/2012/08/01/2618069.html，轉載請註明，並歡迎大家不吝賜教。