rgba背景透明和border透明重叠问题

武林网(www.vevb.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区域开始向外裁剪背景。