HTML透明度中间向四周渐变,css3透明渐变绘制两端透明渐变的分割线

项目需求：绘制一条两端透明渐变的分割线，样式如下：

思路：当然可以用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详细的资料大家上网搜索吧~