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)