border透明

最近在写一表项目，须要边框透明，起初我觉得没有办法实现，最近看一本书中找到办法，就是经过rgba实现，代码以下：

border: 1px solid rgba(0, 0, 0, 0.7);

关于rgba与opacity的区别我就再也不赘述，下面简单叙述border的这种用法若是兼容，简单的实现以下，

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

但是有些IE八、IE七、IE6不支持rgba，因此在这些浏览器下连border都不会显示。解决办法是对于不支持rgba的浏览器写一条border，经过对R/G/B各个色值的调整，来达到和rgba差很少的效果。对于支持rgba的浏览器另写一条border。

注：background-clip，规定背景的显示区域，=padding-box表示背景被裁剪到内边距框。

　　这个属性是为了在背景不透明时，透明的border依然能正常显示。

div {
    border: 1px solid rgb(255, 127, 127);

    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

再多说几句，色值计算：假设咱们要的透明度为a，在不支持rgba的浏览器中色值是多少呢？

这个色值是和背景色有关的。假设背景色为（bR, bG, bB），咱们要显示的颜色是(fR, fG, fB)，要显示颜色的透明度是a。

那么真正的色值是：( bR * (1-a), bG * (1-a), bB * (1-a) ) + ( fR * a, fG * a, fB *a )

例：若是背景色为黑色(0, 0, 0)，那么新的色值为:(fR * a, fG * a, fB * a)。

　　(255, 0, 0, .5) = (127, 0, 0)

　　若是背景色为白色(255, 255, 255)，那么新的色值为(255 * (1-a), 255 * (1-a), 255 * (1-a)) +  ( fR * a, fG * a, fB *a )。

　　(255, 255, 255) + (255, 0, 0, .5) = (255, 127, 127)