For an example of a multi-border effect using CSS for a single element

Border operation is every front-end engineers often encounter, the following article is mainly about how to use CSS to achieve multi-border effect of the relevant data, the text through the sample code to give you a detailed introduction of the implementation of the process, to everyone's study or work has a certain reference learning value, The friends who need to learn to study under together.

Objective

Recently encountered in the work of a question worth thinking, in the CSS, to achieve the same effect may have many ways, such as today's multi-border, some people may think, that is not easy? How many borders can be nested directly into how many of the P elements with a border is not OK!

Yes, it's really simple and rude, but it also produces a lot of meaningless elements.

In fact, to achieve the same effect, an element is sufficient!

Next I will share with you how a single element can achieve multiple border effects ~ ~

First, double border effect

<!--html--><p class= "box" ></p>

/*css*/.box{width:200px; height:200px; border:10px double #000;}

Use border-style: double to achieve a simple double border effect, the effect is as follows:

Border-style:double

The implementation method is simple, but the disadvantage is very obvious:

① can not precisely control the thickness of the double border and the interval between;

② cannot change the style of a double border, such as a double dashed border;

③ cannot achieve more levels of border effects.

Two, double diversification border effect

/*css*/.box{width:200px; height:200px; border:1px solid #000 outline:1px dashed #f00; outline-offset:10px;}

For the outline attribute, we usually use less, it represents the outer contour of the element, displayed on the perimeter of the border, most of the situation seems to be only used to clear the default focus style of the form control: Outline:none;

In fact, outline can produce nearly the same effect as the border attribute, and there is almost no difference in the wording, but here it is about the nuances of the two:

①outline does not occupy the actual space size, this is very similar to Box-shadow;

②outline can not be split into Border-left, border-right and other attributes like border;

③outline cannot set rounded corners.

The Outline-offset attribute is also used in the above example, which is actually a new attribute in the CSS3, which cannot be combined with shorthand in outline to control the distance between the outer border and the outer contour of the outline.

Outline Property

This implementation is also simple and more flexible, but there are several drawbacks:

①outline property cannot be set round corner (Firefox can set the-moz-outline-radius property to achieve rounded corners, but unfortunately other browsers do not have this property), so the round corner of the double border can not be achieved;

② also fails to achieve more layered border effects.

Three, multi-diversity border effect

/*css*/.box{width:200px; height:200px; border:10px solid #000; border-radius:10px; box-shadow:0 0 0 10px #f00, 0 0 0 20px #0f0, 0 0 0 30px #00f;}

The Box-shadow attribute is used instead of the outline property, and the multi-shadow effect overlay can achieve countless layer border effects, while also using the Fillet property Border-radius to achieve multiple rounded border effects.

Box-shadow Property

Although this implementation seems to have achieved the effect we initially wanted to achieve, there is a very significant drawback to this approach, which is that it is not possible to set a dashed border like outline or border, so it is not possible to use this method to achieve multiple dashed border effects.

compatibility: border Of course compatibility is the best, followed by outline, can be compatible to IE8, but outline-offset in IE annihilated, and finally Box-shadow, can be compatible to IE9.

Conclusion

The methods presented in this article each have their own advantages and disadvantages, in the actual application can be based on the use of flexible choice, of course, in addition to the above three methods, we can also combine pseudo-elements to achieve multiple borders, in fact, the final implementation of the principle or this article of these methods, about pseudo-elements, you can look at the pseudo-elements Before with:: The usage of after this article.