武林網(www.49028c.com)文章簡介：rgba背景透明和border透明重疊問題.

代碼如下:

1

2

.box3{width:250px;height:250px;background-color:rgba(255,255,255,0.5);border:5px solid rgba(0,0,0,0.5);}

.box2{width:250px;height:250px;background-color:rgba(0,0,0,0.5);border:5px solid rgba(0,0,0,0.5);}

邊框顏色和背景研究疊加在一起了.

原來背景默認從border開始渲染~邊框顏色和背景顏色重疊自然不一樣~

解決方案:

1

2

.box3{width:250px;height:250px;background-color:rgba(255,255,255,0.5);border:5px solid rgba(0,0,0,0.5);background-clip:content-box;}

.box2{width:250px;height:250px;background-color:rgba(0,0,0,0.5);border:5px solid rgba(0,0,0,0.5);background-clip:content-box;}

加上:background-clip:content-box;從content區域開始向外裁剪背景。