rgba背景透明和border透明重叠问题.
代码如下:
.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开始渲染~边框颜色和背景颜色重叠自然不一样~
解决方案:
.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区域开始向外裁剪背景。
本文链接:» https://www.csswang.com/code/2423
转载请注明本文来源出处。