Rgba case: border-color and background-color color overlay problem.

Border color and background-color use RGBA color, border color will be superimposed.

<style> div { width: 400px; height: 400px; border: 20px solid ; Border-color: rgba(52, 132, 254, 0.8); Background: rgba(52, 132, 254, 0.8); } </style> <div></div>Copy the code

Solutions:

1. border-colorSet totransparent. (suitable forborderandbackgroundBoth rGBA and the same situation)

div { width: 400px; height: 400px; border: 20px solid ; border-color: transparent; Background: rgba(52, 132, 254, 0.8); }Copy the code

2. Usebackground-clip, specify where the background in a box should start (border-box.padding-box.content-box).

Div {width: 400px; height: 400px; border: 20px solid ; border-color: transparent; Background: rgba(52, 132, 254, 0.8); -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; }Copy the code

Reference: css-tricks.com/transparent…