CSS3 Realizes Various Border Effects

Time:2019-9-10

Translucent border

Achieving results:

Implementation code:

<div>
Can you see the translucent 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;
}

Implementing Points:

Set the border to be translucent, which is not yet visible, because by default, the background extends to the lower level of the area where the border is located, that is, the background is cut off by the border.
 

By setting background-clip: padding-box (the initial value is border-box), the background is not extended to the lower level of the area where the border is located, that is, the outer edge of the inner margin is used to cut the background.
 

Multiple Borders

Achieving results:

Implementation code:

<div></div>
/* box-shadow implementation scheme*/
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 scheme*/
div {
    /* Key code*/
    border: 10px solid #655;
    outline: 5px solid deeppink;
    
    /* Other Styles*/
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}

Implementing Points:

The box-shadow implementation scheme uses the fourth parameter (expansion radius) of box-shadow. A positive expansion radius plus two zero offsets and a zero ambiguity result in a “projection” that is actually like a solid border. By using box-shadow to support comma segmentation grammar, we can create any number of projections, so we can achieve multiple border effects.
 

The border/outline implementation scheme uses border to set a layer of borders, and outline to set a layer of borders. This scheme can realize dotted border, but it can only realize two-tier border.

Inside corner of frame

Achieving results:

Implementation code:

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

Implementing Points:

Outline does not follow the rounded corners of the element (thus showing a right angle), but box-shadow does, so if you add the two together, box-shadow (whose expansion value is about half of the border-radius value) will just fill the gap between outline and container rounded corners, so we can achieve the desired effect.

summary

Above mentioned is the introduction of CSS3 to you to achieve a variety of border effects, I hope to help you, if you have any questions, please leave me a message, Xiaobian will reply to you in time. Thank you very much for your support to developpaer.