项目需求：绘制一条两端透明渐变的分割线，样式如下：
思路：当然可以用png格式的图片来代替，这样最兼容，但是最好是用css3来制作。用到的是css3的线性渐变属性：linear-gradient与颜色透明属性rgba的结合使用
详细的css3代码很简单：
.fgx{
width:100%;
height:3px;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
linear-gradient可以做到颜色渐变， rgba又能做到颜色透明，结合起来就可以做到透明渐变的效果。
linear-gradient跟 rgba详细的资料大家上网搜索吧~
未经允许不得转载：前端撸码笔记 » css3透明渐变绘制两端透明渐变的分割线