Rgba background transparent and border transparent overlapping issues

Article Introduction: Rgba background transparent and border transparent overlapping issues.

Rgba background transparent and border transparent overlapping issues.

The code is as follows:

0 S	. 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 color and background research are stacked together.

Original background default from border start rendering ~ border color and background color overlap naturally different ~

Solution:

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;}

Add: Background-clip:content-box to crop the background from the content area.