Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use pure css to achieve dynamic borders, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

CSS3 Background

CSS3 has made some changes to background, the most obvious of which is the use of multi-background settings, not only adding four new properties, but also adjusting and enhancing the current properties.

1. Multiple background pictures

In CSS3, you can apply multiple background images to a tag element. The code is similar to the CSS2.0 version, but the referenced images are separated by commas. The first picture is the background located at the top of the element, and the following background picture is shown below it in turn, as follows:

Background-image: url (image1.jpg), url (image2.jpg), url (image3.jpg)

2. New attribute: Background Clip

Background-clip, as the name implies, background clipping, is used to set whether the background (background image or color) of an element extends below the border.

Background-clip: the border-box; background extends to the outer edge of the border (but below the border)

Background-clip: the padding-box; background extends to the outer edge of the inner margin (padding). Will not be drawn to the border

Background-clip: content-box; background is cropped to the outer edge of the content area (content box)

Background-clip: the text; background is cropped to the foreground color of the text (experimental attribute, browser prefix is required)

3. New attribute: Background Origin

This property needs to be used with background-position. You can use background-position to calculate the location from the border,padding or content boxes content area. (similar to background-clip)

Note: when using background-attachment as fixed, this attribute will be ignored and has no effect.

Background-origin:border-box; is calculated from the border border position

Background-origin:padding-box; is calculated from the padding location

Background-origin:content-box; is calculated from the location of the content-box content area

4. New attribute: Background Size

The Background Size property is used to set the size of the background image. There are several property values:

Background-size: contain; shrinks the background image to fit the tag elements (mainly in terms of pixel ratio)

Background-size: cover; magnifies the background image to the full size of the tag element (mainly in terms of pixel ratio)

Background-size: 100px 100px; indicates the zoom size of the background image

Background-size: 50% 100%; the percentage is to scale the size of the picture according to the size of the content tag element

5. Background Repeat adjustment

When setting the background in CSS2, it is often intercepted by tag elements and is not fully displayed. CSS3 introduced two new attributes to fix this problem.

Background-repeat: space; pictures are tiled at the same spacing and filled with the entire tag element

Background-repeat: the round; picture automatically zooms until it fits and fills the entire tag element

6. Adjustment of Background Attachment

Background Attachment has a new attribute value: local, which is only valid when the tag element is scrolled (such as setting overflow: scroll;), and when background-attachment is set to scroll, the background image does not scroll with the content scroll bar. Now, with background-attachment: local, you can make the background scroll as the element content scrolls.

7. The new mixing mode of Background Blend Mode background is a method to calculate the final color value of pixels when the background overlaps. Each blending mode uses foreground and background color values (top color and bottom color respectively), performs its calculation and returns color values. The final visible layer is the result of a blend mode calculation for each overlapping pixel in the blending layer. Background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

CSS3 multi-background simulation element border

We mainly use three attributes: background-img, background-size, and background-position.

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 use multiple backgrounds to simulate the border of an element.

. 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, 100% 2px, 100% 2px, 100% 2px

Background-position: left top, right top, right bottom, left bottom

}

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

Preliminary effect

Next, let's get the frame moving.

. 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, 100% 2px, 100% 2px, 100% 2px

}

Now we have achieved the interaction as required.

Summary

Compared with the border attribute, using the simulation frame of background has the following advantages and disadvantages

advantage

Inferior position

Can control width and height, gradual discoloration, direction of movement, etc., flexible, can achieve a lot of effects that border can not achieve, and do not need to add additional elements

Cannot achieve border fillet

It should be noted that the frame simulated by background is not equal to the real frame and does not occupy the width and height of the frame. Be careful when calculating the box model.

Last

Due to the further enrichment of the background attributes of CSS3, the multi-background of CSS3 can achieve many effects that can only be achieved with the help of js or pictures, such as translucent background, geometric pattern background, stripe background and so on. I look forward to exploring the mysteries of CSS together with you.

The above is all the content of the article "how to use pure css to achieve dynamic borders". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.