5 ways to implement multiple borders with the "base" CSS

Original: 5 ways to implement multiple borders with "base" CSS

Jianyan

The most elegant way to implement multiple borders is to take advantage CSS3 of the box-shadow properties, but if you want to be compatible with older browsers, you need to choose a different scenario. This paper gives a brief description of several multi-frame implementation schemes, and we can choose the most suitable one according to the actual and compatibility requirements of the project.

1 Using Strokes ( outline) property

Scenario 1 uses the stroke ( outline ) property to combine border attributes to achieve a double border. This scheme is easy to implement and compatible, and can be incompatible IE6,7 with other browsers.

1.1 Core Code

.borders{  border:solid6px#fff;  outline:solid6px#888;  }

1.2 Demo Program

Demo Program

1.3 Description

• Only double borders can be implemented
• The border style is flexible, you can implement the border of style such as dashed line
• Strokes are outside the box model and overlap with external elements

2 using the extra div

Scenario 2 implements multiple borders in a way that uses additional div nesting. This is the only scenario where there is no compatibility issue.

2.1 Core Code

.outer{    border:solid6px#888;    background:#fff;}.inner{    background:#222;    margin:6px;}

2.2 Demo Program

Demo Program

2.3 Description

• Good compatibility
• Styles such as multiple borders, dashed borders, etc. can be implemented
• Additional DIV elements are required, adding code complexity

3 using pseudo-elements

Scenario 3 implements a double border using pseudo-element ( :before ). Implementation of the code is slightly complex, belonging to the implementation of hack, not recommended.

3.1 Core Code

. Borders {    border: Solid 6px #fff;    Position: relative;}. Borders: Before {    content: "";    Position: Absolute;    Top: -12px;    Left : -12px;    Right : -12px;    Bottom: -12px;    border: Solid 6px #888;}

3.2 Demo Program

Demo Program

3.3 Description

• IE6,7,8Not compatible
• :afteryou can use it.
• Simultaneous application :before and :after can achieve triple border

4 utilization border-imageProperty

Scenario 4 uses CSS3 border-image attributes to implement multiple borders. The implementation method is simple, but need to make an additional border picture, compatibility is poor.

4.1 Core Code

.borders{    border:solid12pxtransparent;    border-image:url(‘borders.jpg‘)12121212repeat;}

4.2 Demo Program

Demo Program

4.3 description

In this example, the border-image-slice border picture is divided into 9 regions as shown:

These include four angles (1,2,3,4), four edges (5,6,7,8), and an intermediate area (9).
repeatRepresents a tile with four edges repeating on the corresponding border.

5 utilization box-shadowProperty

Scenario 5 uses box-shadow attributes to implement multiple borders. Scenario 5 is the simplest and most straightforward way to implement multiple borders. Multiple border effects can be achieved with just one line of code. Use the Shadow ( box-shadow ) to implement the border how much some hack taste.

5.1 Core Code

.borders{    box-shadow:0006px#fff00012px#888;}

5.2 Demo Program

Demo Program

5.3 Description

To simulate a border with shading, this example uses two shadow effects, sets the offset and blur values 0 , and sets the size of the shadow appropriately to achieve a double border effect. Because one shadow overlaps on top of another, the second shadow is set to twice times the size of the first shadow. The key part is to set the blur value to 0, which produces a solid shadow like a border, and looks like a border.

As with the stroke ( outline ) property, the box-shadow attributes may overlap with the surrounding elements, so the margins of the elements are set appropriately. box-shadowcompatibility is common.

6 References

MDN Border-image

MDN Box-shadow

Multiple Borders with CSS

Css-tricks multiple Borders

7 Conclusion

This paper briefly describes the implementation of 5 kinds of multi-frame, each has advantages and disadvantages, we should choose according to the actual situation.

Part of the text and code is compiled in the network. Due to lack of time, limited capacity and other reasons, there are many problems such as the lack of written explanation and code testing.

5 ways to implement multiple borders with the "base" CSS