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 */
}

可是有些IE8、IE7、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)