A brief discussion on how to use CSS to achieve translucent borders and multiple border effects

This article will introduce you to CSS semi-transparent borders and multiple border effects in two scenarios. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

(Learning video sharing: css video tutorial)

Scene 1:

Implementing a translucent border:

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

The translucent border is affected by the main color, and the effect achieved is

Solution:

Use the background-clip attribute to specify the drawing area of ​​the background so that the drawing area is limited to content padding only.

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:

Realize multiple borders:

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

Option 2: Combining box borders Stroke attribute (outline)

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

The code and effects are as follows:

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

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on how to use CSS to achieve translucent borders and multiple border effects. For more information, please follow other related articles on the PHP Chinese website!