.bottle_mouth:after{height:6px; width:44px; content:”; display:block; border-radius:25px/6px;border:1px solid rgba(255,255,255,.4); position:absolute; left:-1px; top:-4px;z-index:1; box-shadow:0px 0px 3px rgba(255,255,255,0.3);}
.bottle_top .highlight{width:20px; height:30px; display:block; position:absolute; left:5px; top:5px; -moz-transform:skew(0deg,5deg);background:-moz-linear-gradient(left,rgba(255,255,255,0.1),rgba(255,255,255,0.6) 4%,rgba(255,255,255,0.2) 98%,rgba(255,255,255,0));}
.bottle_top .highlight:after{content:”; display:block; width:2px; height:30px; position:absolute; top:-1px; left:-3px; -moz-transform:skew(0deg,5deg); background:rgba(255,255,255,.3);}
</style>
<body>
<div class=”main”>
<div class=”bottle”>
<div class=”bottle_top”>
<div class=”bottle_mouth”></div>
<div class=”highlight”></div>
</div>
</div>
</div>
</body>
因为用了css3，所以建议还是还是在firefox下面预览！
虽说比较抽象，我不说你们应该不知道是个玻璃瓶的盖子吧 瓶身部分的代码量太多了就不帖了。
所以before和after运用的好可以节省html标签，并且配合css3做出很好的效果，当然做着玩的，不是太实用。
二、下面顺带说些css3的属性吧，(border-radius&box-shadow)我也只是正在慢慢摸索中···········
border-radius开始啦！！
1、border-radius：none | <length>{1,4} [ / <length>{1,4} ]?
相关属性：border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius,其实border-radius就是他们四个属性的简写。
取值：<length>由浮点数字和单位标识符组成的长度值，不可能负值。
看这幅图说明，不然容易晕。
说明：
1、第一个值即x是指水平半径。
2、如果第二个省略即y，则他等于第一个值，这时这个角就是一个四分之一的圆角。
3、如果任意一个值为0，则这个角为矩形，不会为圆形。
4、值不允许是负值。
当border-radius：<length>{1,4} [ / <length>{1,4} ]?时
1、如果斜线前后的值都存在，那么斜线前的值设置为水平半径（x),斜线后的值设置为垂直半径(y)，如果没有斜线则水平半径和垂直半径相等，
也就相当于四分之一个圆。如：border-radius:46px/10px;四个角的半径大小都为46px/10px。
2、四个值的顺序是按照top-left,top-right,bottom-right,bottom-left(反正是顺时针啊？逆时针啊？)如果bottom-left省略它就等于top-right，
