CSS3 achieves various border effects

Translucent border

Result:

Implementation code:

<div>
Can you see the semi-transparent border?
</div>
div {
    /* Key code */
    border: 10px solid rgba(255,255,255,.5);
    background: white;
    background-clip: padding-box;
    /* Other styles */
    max-width: 20em;
    padding: 2em;
    margin: 2em auto 0;
    font: 100%/1.5 sans-serif;
}

Implementation points:

Set the border to semi-transparent. You cannot see the semi-transparent border because, by default, the background extends to the lower layer of the area where the border is located, that is, the background is cut off by the outer edge of the border.

By setting background-clip: padding-box (the initial value is border-box), the background is prevented from extending below the border area, that is, the outer edge of the padding is used to clip the background.

Multiple borders

Result:

Implementation code:

<div></div>
/* box-shadow implementation */
div {
    /* Key code */
    box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
    /* Other styles */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}
/* border/outline implementation */
div {
    /* Key code */
    border: 10px solid #655;
    outline: 5px solid deeppink;
    
    /* Other styles */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}

Implementation points:

The box-shadow implementation uses the fourth parameter of box-shadow (expansion radius). A positive dilation radius plus two zero offsets and zero blur values ​​results in a "projection" that actually looks like a solid border. With the help of box-shadow supporting comma-separated syntax, any number of shadows can be created, so we can achieve multiple border effects.

The border/outline implementation is to use border to set a border layer, and then use outline to set a border layer. This solution can achieve a dotted border, but it can only achieve two layers of borders.

Border inner corners

Result:

Implementation code:

<div>I have a nice rounded corner</div>
div {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655; /* Key code*/
    max-width: 10em;
    border-radius: .8em;
    padding: 1em;
    margin: 1em;
    background: tan;
    font: 100%/1.5 sans-serif;
}

Implementation points:

The outline doesn’t follow the rounded corners of the element (thus appearing as a right angle), but the box-shadow does, so by adding the two together, the box-shadow (whose expansion value is roughly equal to half the value of border-radius) will just fill the gap between the outline and the container’s rounded corners, thus achieving the effect we want.

Summarize

The above is what I introduced to you about how to achieve various border effects with CSS3. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!