CSS3 realizes various border effects

Translucent border

Realize the effect:

Implementation code:

<div>
你能看到半透明的边框吗？
</div>

div {

    /* 关键代码 */
    border: 10px solid rgba(255,255,255,.5);
    background: white;
    background-clip: padding-box;
    
    /* 其它样式 */
    max-width: 20em;
    padding: 2em;
    margin: 2em auto 0;
    font: 100%/1.5 sans-serif;
}

Implementation points:

• Set the border to translucent, which means that the semi-transparent border cannot be seen yet, because by default, the background will extend to the lower layer of the area where the border is located, that is, the background will be cut off by the outer border of the border.
• By setting background-clip: padding-box(the initial value is border-box), the background does not extend below the area where the border is located, that is, the outer edge of the padding cuts the background.

multiple borders

Realize the effect:

Implementation code:

<div></div>

/* box-shadow 实现方案 */
div {

    /* 关键代码 */
    box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
    
    /* 其它样式 */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}

/* border/outline 实现方案 */
div {

    /* 关键代码 */
    border: 10px solid #655;
    outline: 5px solid deeppink;
    
    /* 其它样式 */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}

Implementation points:

• box-shadowThe implementation uses the fourth parameter of box-shadow (expansion radius). A positive dilation radius plus two zero offsets and a zero blur value results in a "projection" that actually looks like a solid border. With box-shadow's support for comma-separated syntax, any number of shadows can be created, so we can achieve multiple border effects.
• border/outlineThe implementation scheme is to use border to set a layer of border, and then use outline to set a layer of border. This scheme can achieve dashed borders, but it can only achieve two-layer borders.

rounded corners

Realize the effect:

Implementation code:

<div>我有一个漂亮的内圆角</div>

div {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655; /* 关键代码 */
    
    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 showing right angles), but the box-shadow does, so stacking the two together, the box-shadow (which expands by roughly half the border-radius value) will It just fills the gap between the outline and the rounded corners of the container, so we can achieve the effect we want.