Chapter II Background & Borders multiple Borders

2. Multiple boerders multi-border

At work we may encounter multiple borders for the outer layer of the box. such as the following effects:

Method 1:

To achieve this effect, in fact, it is very simple, using the CSS3 Box-shadow property, first look at Box-shadow properties how to use it.

Box-shadow:h-shadow v-shadow blur spread color Inset|outset/none/inherit

H-shadow horizontal offset relative to box

V-shadow Vertical offset relative to box

Blur blur radius (width of shadow)

Splread Extended radius (extended width of shadow)

Inset/outset (default) inner or outer shadow

The principle of multi-border is to add multiple shadows to the box.

As an implementation method:

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

Box-shadow set the three shadows, from inside to outside. The radius of the first shadow is 10px, the second shadow has a radius of 15px, and the third shadow coincides with the second shadow to set the shadow effect.

So, it is worth noting that the inside of the shadow outside will cover the outside. This is why the second setting is 15px, not 10px.

Method 2:

The Box-shadow method is good, but it is not really applied to the border, and has no effect on the size of the box. So the second method is to use the Outline property:

A outline (contour) is a line that is drawn around an element, at the periphery of the edge of the bounding rectangle, that acts as an element of prominence.

Outline:color style Width/initial/inherit

such as the effect of the code, you can write:

. Box{width:100px;height:80px;background: #655; border:2px dashed white;outline:15px solid #655; outline-offset:5px;}

　　

However, the outline is only suitable for cases where there are two border, and is not applicable to rounded scenes. -_-

Scenario: Create a prototype border in slices to use Box-shadow.

Chapter II Background & Borders multiple Borders