CSS Secrets----Multiple borders

Original document: https://www.zybuluo.com/freeethy/note/193574

　　

Box-shadow Solution

• Only solid border can be achieved

Box-shadow is shown as border, but not in the Box-sizing range:

   Background:yellowgreen;   box-shadow:0 0 0 10px #655;

Multiple Box-shadow values can show the effects of multiple border, and the values of multiple Box-shadow are displayed at the top of the layer, at the top:

    
    0 0 0 15px deeppink;

Multiple Box-shadow values, some of which are border effects, some of which are shadow effects, and Border-radius effects, at which point Border-radius has an effect on each Box-shadow value:

    box-shadow:0 0 0 10px #655,    0 0 0 15px deeppink,    0 2px 5px 15px rgba (0,0,0,.6);    border-radius:10px;

Outline Solution

• can achieve dashed border
• Border offset can be implemented with Outline-offset
• Only two layers of border can be implemented

The realization of this method and the effect of Border-radius, the Border-radius has no effect on outline:

    border:5px solid #655;    outline:5px dashed deeppink;    outline-offset:10px;    border-radius:10px;

CSS Secrets----Multiple borders