Enabling multi-background simulation of dynamic borders

This time to bring you to achieve multi-background simulation dynamic border, to achieve multi-background simulation of the dynamic border of the note, the following is the actual case, a look.

First look at what you want to achieve.

The implementation method is as follows

The first thing I think about is the border property, but the border property cannot set the length. If implemented with border, it needs to be simulated with other elements, which is more troublesome. It suddenly occurred to me that I had seen someone use CSS3 's background to simulate the border on the internet, and tried it.

CSS3 background

CSS3 for background made some changes, the most obvious one is the use of setting multi-background, not only added 4 new attributes, and also the current properties have been adjusted to enhance.

1. Multiple background images

In CSS3, you can apply multiple background images to a tag element. The code is similar to the css2.0 version, but the reference picture needs to be separated by a comma. The first image is positioned on the topmost background of the element, followed by a background image that appears below it, as follows:

Background-image:url (top-image.jpg), url (middle-image.jpg), url (bottom-image.jpg);

2. New attribute: Background Clip

This discussion lets us go back to the beginning of the article about the background being obscured by the border border. The addition of the background-clip allows us to control the position of the background display completely.

The property values are as follows:

Background-clip:border; Background starts to show under the border border

background-clip:padding; The background starts under padding, not the border border.

Background-clip:content; The background starts under the content area, not the border border under start or padding.

Background-clip:no-clip; Default attribute value, similar to Background-clip:border;

3. New attribute: Background Origin

This property needs to be used in conjunction with Background-position. You can use Background-position to calculate the positioning from the border,padding or Content boxes contents area. (similar to Background-clip)

Background-origin:border; From border border position

background-origin:padding; From padding location

Background-origin:content; From the location of the Content-box content area;

Background-clip and Background-origin differences www.CSS3.info site to do a good analysis of the explanation.

4. New attribute: Background Size

The Background Size property is used to reset your background picture.

There are several property values:

Background-size:contain; Shrink the background image to fit the label element (mainly pixel ratio)

Background-size:cover; Enlarges the background image to the entire LABEL element size (mainly pixel ratio)

background-size:100px 100px; Size that indicates the scale of the background image

background-size:50% 100%; Percentage is the size of the content label element to scale the size of the picture

You can go to the CSS 3 specifications site to see a simple case description.

5. New attribute: Background break

CSS3 tag elements can be divided into different regions (such as: let inline element span spans multiple lines), the Background-break property can control the background display in different regions.

Property value:

background-break:continuous; This property is the default value, ignoring gaps between zones (applying pictures to them as if they were an area)

Background-break:bounding-box; Reconsider the interval between regions

Background-break:each-box; The background is re-divided for each individual label area.

6, the background color adjustment

The Background-color property has been slightly enhanced in the CSS3 version, with the exception of the background color background color, which can be used to de-color the background image of a LABEL element that is not in use.

Background-color:green/blue; In this example, the background color may be green, however, if the bottom background image is not valid, blue will be shown instead of green. If you don't specify a color, it's considered transparent.

7. Repeated adjustment of background

CSS2 when setting the background, it is often truncated by the tag element and is not fully displayed, CSS3 introduces 2 new properties to fix the problem. Space: The picture is tiled with the same spacing and fills the entire LABEL element round: The picture is automatically scaled until it fits and fills the entire LABEL element

The use of CSS 3 specifications website for Background-repeat:space is a ready-made example.

8, the adjustment of Background Attachment

Background attachment has a new property value: Local, which is valid when the label element scrolls (such as setting overflow:scroll;), and when Background-attachment is set to scroll, The background picture is not scrolled with the content scroll bar. Now, with background-attachment:local, you can make the background scroll with the contents of the element scrolling.

CSS3 Multi-background simulation element border

We mainly use the background-img, Background-size and background-position three properties here.

Background-image: [Background-image], [Background-image], [background-image]; Background-position: [Background-position], [background-position], [background-position]; Background-repeat: [Background-repeat], [background-repeat], [background-repeat];

The abbreviated form is as follows:

Background: [Background-image] [background-position] [background-repeat], [background-image] [background-position] [ Background-repeat], [background-image] [background-position] [background-repeat];

Now we're using multiple backgrounds to simulate the border of an element.

/*css*/.exammple {    background:linear-gradient (0, #108b96 2px, #108b96 2px) no-repeat,                 linear-gradient ( -90deg , #108b96 2px, #108b96 2px) no-repeat,                 linear-gradient ( -180deg, #108b96 2px, #108b96 2px) no-repeat,                 Linear-gradient ( -270deg, #108b96 2px, #108b96 2px) no-repeat;    background-size:100% 2px, 2px 100%, 100% 2px, 2px 100%;    Background-position:left top, right top, right bottom, left bottom;}

<p class= "Exammple" ></p>

We use four gradient backgrounds to simulate four borders (why do we use a gradient instead of a direct color?). This is because the CSS of the multi-background can only be background-image, Background-color does not support multiple values, all even the solid color of the border, we can only use the gradient.

Next, let's move the frame.

/*css*/.exammple {    transition:ease-in. 3s;    Background:linear-gradient (0, #108b96 2px, #108b96 2px) no-repeat,                 linear-gradient ( -90deg, #108b96 2px, #108b96 2px ) No-repeat,                 linear-gradient ( -180deg, #108b96 2px, #108b96 2px) no-repeat,                 linear-gradient ( -270deg, #108b96 2px, #108b96 2px) no-repeat;    background-size:0 2px, 2px 0, 0 2px, 2px 0;    Background-position:left top, right top, right bottom, left bottom;}. exammple:hover {    background-size:100% 2px,  2px 100%, 100% 2px, 2px 100%;}

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Set scroll bar style

Summary of the center layout of CSS

Summary of the shape of CSS3

The method of horizontal vertical centering of three absolutely positioned elements