CSS realizes the scene analysis of semi-transparent border and multiple border

Scenario 1:

To achieve a semi-transparent border:

Due to the default behavior of CSS styles, the background color is rendered in the range of content+padding+border.

The semi-transparent border is affected by the main color, and the effect achieved is

Solution:

Use the background-clip property to specify the background drawing area so that the drawing area is limited to content + padding.

Div {
border:10px solid rgba(0,0,0,.5);
background: lightblue;
background-clip: padding-box;
}

Supplement: background-clip is not compatible with IE6-8, Opera10

Scenario 2:

To implement multiple borders:

Solution 1: Use box-shadow to generate multiple projections

The code and effect are as follows:

div {
background:#c3e6f4;
box-shadow:0 0 0 15px #b7dae6,0 0 0 30px #cce2ea;
}

Solution 2: Box border combined with stroke attributes (outline)

Features: Only double borders can be achieved, more flexible, and can use dotted line and other effects

The code and effect are as follows:

div {
border: 6px dashed #c3f4ec;
outline: 10px solid #d9faf6;
background-clip: padding-box;
} 

Summarize

The above is the scenario analysis of implementing semi-transparent borders and multiple borders with CSS introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!