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，轉載請注明，並歡迎大家不吝賜教。