Examples of ways to implement a multilateral and transparent border using CSS

CSS Multi Border

When Backgrounds & Borders Level 3 was a draft, the CSS WG did a lot of research on whether to support multiple borders, like a multiple background picture. Unfortunately, it was thought that the usefulness of multiple borders was small, and that the Border-image property could be used to simulate even if needed. However, the WG obviously forgot to adjust the border flexibly in CSS code, which is what we need, now developers can only use some hack means to simulate multiple borders, such as using multiple elements of nesting to simulate multiple borders. Now, I'll show you some of the better ways to implement multiple borders without using extra tags.

Box-shadow Solutions

Now, most of the time you use Box-shadow to create shadows. However, few people know that it also accepts the fourth parameter (spread), which scales the range of shadows. For example, we created a shadow with a horizontal and vertical offset of 0, which uses the fourth argument mentioned above:

CSS code copy content to clipboard

Background:yellowgreen;

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

The effect is shown in the following illustration:

Figure Note: Use Box-shadow to simulate border lines

That's not surprising, because it's about the same as the border we created with border. However, the powerful is that we can use commas to create any number of shadows. So, just keep adding shadows and you can implement multiple shades, such as adding a border with a deeppink color:

CSS code copy content to clipboard

Background:yellowgreen;

box-shadow:0 0 0 10px #655, 0 0 0 15px deeppink;

The only thing to keep in mind is that the Box-shadow attributes are stacked together, the first shadow is always at the top, so you need to resize the shadow. For example, in the previous code, we wanted the outermost border to be 5px, so we could set a 15px (10px + 5px) shadow. If you want, then you can specify any level of shadow:

CSS code copy content to clipboard

Background:yellowgreen;

box-shadow:0 0 0 10px #655,

0 0 0 15px deeppink,

0 2px 5px 15px rgba (0,0,0,.6);

In addition to the few cases listed below, the solution using Box-shadow is easy to use:

Shadows are not borders, they do not occupy the actual space, nor can they be attributed to the scope of the box-sizing. However, you can simulate by using the inner margin or the outer margin (depending on whether the shadow is internal or external) to occupy the extra space.

The above example simulates a border that is located outside the element. It cannot capture mouse events similar to hover and click. If the event is important, you can make the shadow appear inside the element by adding the inset keyword. Note that you may need to add extra padding to augment the space.

Outline Solutions

In some cases, if we only need a two-layer border, then we need only one layer of regular borders and one layer of outline to implement. This also makes our borders flexible enough for the style (we want a dotted border, for example), but with Box-shadow we can only simulate a solid line border. As shown in the following illustration:

Note: Use Box-shadow to simulate two contour lines

CSS code copy content to clipboard

Background:yellowgreen;

border:10px solid #655;

outline:15px solid Deeppink;

Another benefit of using outline is that we can control the distance from the outline to the element's border through Outline-offset, which can even accept negative values. This is useful for a number of effects, as shown in the following illustration:

* Note: For dotted-line contour, create a basic sewing effect by setting a negative value to the outline-offset *

However, there are some limitations to this approach:

As was initially said, this method can only simulate two-tier borders, because each element can only create one outline. If you need to create multiple borders, you can only use the Box-shadow method.

Border-radius does not allow outline to render rounded corners, so even if your border is rounded, outline is still at right angles (as shown in the following figure). Note that the CSS WG considers this to be a bug, and in the future Border-radius may turn outline into rounded corners.

According to CSS User Interface Level 3 Specification: "Outliens may not be a rectangle." "While most of the time it looks like a rectangle, you need to do a cross-browser test when you use this method."

Note: Contour lines created by outline do not have rounded corners of the fitting elements, and this problem may be modified in the future

Border-colors Solutions

Border-colors is a unique attribute that is literally born for multiple borders, but unfortunately, so far this is only unique to the Gecko kernel browser.

If you do not investigate browser compatibility, then Border-colors can also achieve the effect of the multilateral box. When used specifically, it needs to be written in four edges:

CSS code copy content to clipboard

-moz-border-top-colors: */* top edge Border * * *

-moz-border-right-colors: */* Right Border * *

-moz-border-bottom-colors: */* Bottom Border * * *

-moz-border-left-colors: */* Left Border * * *

Although this approach can also achieve the multilateral box effect, but compared to the first two solutions are more troublesome, to see a simple example:

CSS code copy content to clipboard

border:10px solid;

-moz-border-top-colors:red Red Red Red Green green blue blue blue;

-moz-border-bottom-colors:red Red Red Red Green green blue blue blue;

-moz-border-right-colors:red Red Red Red Green green blue blue blue;

-moz-border-left-colors:red Red Red Red Green green blue blue blue;

To achieve a three-color multilateral box effect, red accounts for 4px,green 3px and Blue Dot 4px. It's going to take a lot of ADO. It is also not possible to write border-colors directly because browsers do not recognize such attributes.

In addition, the current browser on this property support is quite weak. It can be said that it is only the private properties of Firefox.

CSS Transparent border

The translucent colors in CSS may already have a basic understanding, such as RGBA () and Hsla (). Starting in the 2009, while using them in development design takes some cost, such as offering a downgrade and using IE filters, it's a huge change. However, in practice, they are mainly used in the background, there are several reasons:

The early developers didn't realize that the new attributes were similar to #ff0066 and orange colors, but they were viewed as pictures, so they were used only on the background.

Providing a downgrade scheme for a background is simpler than other properties. For example, you can use a single pixel semitransparent image to replace a semitransparent background. For other properties, you can use only opaque colors.

Using semitransparent colors on other properties, such as borders, is not easy, and we'll explain why.

Note: 24ways.org was the first web site to use semitransparent colors in the design, when it was 2008, when their site was characterized by the use of a large number of backgrounds (designed by Tim Van Damme)

Let's say we want to beautify a container so that it has a white and translucent white border--a translucent border that lets it show what's behind it. The first step we're going to make is like this:

CSS code copy content to clipboard

border:10px solid Hsla (0,0%,100%,.5);

Background:white;

Unless you have a good understanding of how background and border are working, the results of the code above will be confusing to you. Where does the border go? Can't you add a semitransparent color to the border?

Figure Note: First attempt to implement a semi-transparent border

Solution

Although the effect seems to be different from the expected, the border actually exists. In fact, the background color is extended to the border by default, which can be observed by adding a dashed line to the border. As shown in the following illustration:

Note: The background is extended below the border area by default

Although this is the same as using an opaque solid border, in this case it completely reverses our expectations. The result appears to be a plain white border, which is actually a semitransparent white border, followed by a white background color underneath it.

In CSS 2.1, this is how background works. We have to accept and use it. Thankfully, in Backgrounds & Borders Level 3, we can use the Background-clip property to adjust this effect. The default value for Background-clip is Border-box, that is, the background color is populated to the container border and within the border, so we only need to modify it to Padding-box (let the background color fill inside the container's inner margin and inside margin) You can achieve the desired effect:

CSS code copy content to clipboard

border:10px solid Hsla (0,0%,100%,.5);

Background:white;

Background-clip:padding-box;

The more complete effect is shown in the following illustration:

Figure Note: Fixed the problem with the Background-clip

Summarize

Although the Rgba (), Hsla () setting on the Border-color is translucent or fully transparent, the transparent color effect of the border can be directly affected if the element has a background color or background picture set. In particular, to see what is underneath the border. This behavior is caused by the background image extending to the bottom of the border. To solve this problem, it can be corrected by CSS3 's background-clip. @Chris Coyier the knowledge in Css-tricks as early as 2010.