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，转载请注明，并欢迎大家不吝赐教。

转载于:https://www.cnblogs.com/pinocchioatbeijing/archive/2012/08/01/2618069.html