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

Css3 border-image frame image example analysis, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Preface

For this border-image attribute is no longer a new thing, but also a topic of old growth. This attribute has appeared since many years ago, but it has been alone and does not seem to be favored, but if you study it in depth, it must still be useful, but it is a pity that so far there is no more support for browsers than other css3 attributes, especially IE, which is only supported above IE11. For details, please move to border-image compatibility. But good, the support for pure modern browsers and mobile browsers is very impressive, so let's explain the various values of this property in detail today.

Border-image Summary

In fact, I [border-image attribute] is used to add a background image to the element border, at some point, using this border-image can easily draw some more complex widgets. And I am the abbreviation for border-image-source border-image-slice border-image-width border-image-outset border-image-repeat. Just for the convenience of shorthand, after all, you know, our family border-* has an abbreviated value, if not as a newborn, the people watching are probably drunk.

Oh, by the way, I forgot to tell you that my function is to replace the border-style value. It is worth noting that if the border-image value is none, the background image will not be displayed, and at the same time, the border-style value will be displayed. Then my detailed abbreviated values are as follows:

Attribute name: border-image value: | | [/ | /?]? | | initial value: for more information, please see the attribute applied to all elements, except the table cell border-collapse is collapse. Whether to inherit: no percentage: Nram A Media: visual calculated value: see each attribute for details Animation: see each attribute for details

So, my complete way of writing is

The code is as follows:

.border-image-all {border:27px solid # 000; border-image:url (http://img.xiaoho.com/2014/09/border.png) 27 27 27 fill/27 27 27/27px 27px 27px 27px repeat;}

As you can see, this is one of my abbreviated values. Please don't get dizzy, although it's a long list of English words, I'm afraid you're not strange to me. QQ is cute.

Think about which of the css attributes are related to pictures. Anyway, I thought of the value of the background attribute. The attribute values of the image properties introduced in css are nothing more than: picture address background-image, picture repetition background-repeat, picture tile mode background-attachment and so on. So it's pretty much the same for frame images. Let's analyze these individual attribute values one by one.

Border-image has six attribute values, namely: picture address border-image-source, picture slice border-image-slice, picture width border-image-width, picture convex border-image-outset, picture repeat border-image-repeat.

Picture address border-image-source

Attribute name: border-image- Source value: none | initial value: none

My name is to introduce the image address attribute. The attribute value of my attribute is easier to understand, because there are only two attribute values. The initial value is none. If none is set, then our box border will apply the value of border-style. If you want to set an image with an external link address, the code can directly write:

The code is as follows:

. border-image {

Border:20px solid # 000

Border-image-source:url (border.png); / / visually, I will look uglier than., try it.

}

Picture slice border-image-slice

Attribute name: border-image-slice value: [|] {1Jing 4} & & fill? Initial value: none

My name is border-image-slice, and I specify the offset at the top, right, bottom, and left side of the frame image. Mine does not have a specific unit value, such as px, em can not be applied to me, you just give me a simple number, of course, you can also set me according to the percentage. My role is to cut the frame image into 9 regions: 4 corners, 4 sides and a middle part. My predecessors modestly called it 9 grid, but I will whisper to you that if you do not apply the optional attribute value of fill, the ninth grid in the middle will be treated as transparent, which is equivalent to which dog has eaten the middle piece.

The first value is number, that is, pure numbers are measured as units, such as 1, 2, 3. ; the second value is percentage, that is, the percentage as a unit {1border-image-slice:27 border-image-slice:27 4} means that the previous number appears at least once and at most 4 times, such as border-image-slice:27 border-image-slice:27 27 border-image-slice:27 27 27 border-image-slice:27 27 27 27. This is more or less the same as the value of margin. If you don't know what these abbreviations represent, you might as well take a look at the abbreviated value of margin written some time ago. Fill is an optional attribute value, if specified. Then the ninth block in the middle is not a transparent block, if not specified, it is a transparent picture processing.

You must be very curious about how I work, even if csser specifies a few numbers, but he doesn't understand how he works, so hehe. So here's a detailed explanation:

The picture uses a special product designated by W3C ~ a square bitmap of 81px, 9 diamond patterns, each of which is 27*27px

The upper left corner, upper right corner, lower right corner and lower left corner are 4 orange diamonds, while the top area, right area, bottom area and left area are 4 yellow diamonds, and the middle block (known as the ninth area) is a transparent block. As I just said, this border-image-slice is the function of a slice that cuts the image directly without leaving a trace in the middle. Given this attribute value: border-image-slice:27 27 27 27, then it means a cross cut from the offset area 27px at the top.

Then 27px cut vertically from the inner offset area on the right.

Then 27px crosscut a knife from the offset area at the bottom

Then 27px cut vertically from the offset area on the left.

Then the complete dynamic picture of the given image slice border-image-slice:27 27 27 27 is as follows:

These knives have divided me into nine parts, so that's why I was given nine palace grids.

So the cut parts are all distributed in the nine places of the box frame, as shown above. Correspondingly, the separated image can only be active within the frame width (border-width). What does it mean? for example, the box frame is border-width:54px to divide the picture into border-image-slice:27, because the width and height of the four vertices of the image are only 27px, but the frame of the box is 54px, so the picture has to be stretched horizontally and vertically to be cut equal to the width of the box, that is, the image of 27px is stretched until 54px stops. If you go any further, you can't! On this point, it is a little different from Brother Xin's explanation, because he thinks that this is a blind spot in vision, and the separated vertex image is only assigned to the four vertex corners of the frame and will not be tiled, repeated or stretched (which is not consistent with what I said). The original quote is as follows:

The orange-red diamond-shaped area with four corners is called "corner border picture". In border-image, the corner border picture has no display effect, will not be tiled, will not be repeated, nor will it stretch, which is somewhat similar to the visual meaning of a blind spot.

To prove my point, I used two demo to show it.

Demo1: when the width of the box frame is larger than the frame of the cut image, the following code

The code is as follows:

. border-image {

Border:54px solid # 000; / / the box frame is 54px

Border-image-source:url (border.png)

Border-image-slice:27 27 27 27; / / the frame image is cut into 9 regions, of which four vertices are 27*27px in size.

}

Effect:

My understanding of this is the following steps:

For more information, please click: the value of slice slice is larger than the width of the border.

Demo2: when the width of the box border is smaller than the frame of the cut image, the following code

The code is as follows:

. border-image {

Border:14px solid # 000; / / the box frame is 14px

Border-image-source:url (border.png)

Border-image-slice:27 27 27 27; / / the frame image is cut into 9 regions, of which four vertices are 27*27px in size.

}

Effect:

My understanding of this is the following steps:

For more information, please click: the value of slice slice is smaller than the width of the border.

Therefore, the changes of the four vertices I know actually have the function of stretching, of course, if the width of the box frame is equal to that of the cut image, then there will be no stretching effect.

Tell me about the fill value.

Fill value is an optional attribute value, if you specify this value, then Zone 9 will appear, if not specified, then Zone 9 will be occupied by aliens, hidden! (there will be demo ↓ downstairs)

Two points to note:

1. Slice is not allowed to set negative values. Negative values and settings greater than the height or width of the box are both 100% (there is demo ↓ downstairs).

2, slice cut areas may overlap, if the right cut and left cut values and the width of the ≥ box, then the top area (No. 5) and bottom area (No. 7) is blank (downstairs with demo ↓), and vice versa.

Can you control the width of the picture frame instead of debugging the box frame width every time? Of course there is. Let's introduce the optional attribute value of border-image-width.

Border picture width border-image-width

My name is border-image-width, and my function is to replace the border width border-width of the box itself. If specified, then the border picture width will be determined by me, if not specified, then the picture border width will be fixed by the border width of the box. I can use specific pixels, numbers (representing several times) and percentage to express at least 1 value and up to 4 values, representing the frame width of the upper right and lower left image, respectively. Note that the relevant code is as follows:

The code is as follows:

. border-image {

Border:20px solid # 000; / / the width of the box border is 20px

Border-image-source:url (border.png)

Border-image-width:27px 1 10% 27px; / / the border picture width is set to top:27px,right:1 times, bottom:10%,left:27px, so these values will replace 20px as the picture border width.

}

Border picture convex border-image-outset

My name is border-image-outset, and my function is to extend the border background beyond the box. There are two attribute values, length and number, the former is the specific pixel unit, and the latter is a number, at least 1 value, up to 4, respectively, representing the outward extension distance of the upper right, lower left image frame, the related code is as follows:

The code is as follows:

. border-image {

Border:27px solid # 000; / / the width of the box border is 27px

Border-image-source:url (border.png)

Border-image-outset:27px 27px 27px 27px; / / the frame image direction is set to 27px, then the background image will extend 27px from the outermost boundary of the box to the upper, lower, right and left.

}

Before and after border-image-outset extension

Frame picture repeats border-image-repeat

My name is border-image-repeat, as the name implies, my function is to make the frame background repeat, the default value is stretch, which means stretching, four corners and four regions are stretched horizontally and vertically to fill the gap of the frame; repeat is to make the four corners and four regions finish copying the image horizontally and vertically, do CTRL+V movement, and fill the gap between the frames. On the other hand, round [surround] is to divide the four corners and four areas into equal areas, and then cut them with a background image to cover the entire frame gap, neither more nor less, just right. I heard that there are demo ↓ below:

The code is as follows:

.border-image-stretch {

Border:27px solid # 000

Border-image-source:url (http://img.xiaoho.com/2014/09/border.png);

Border-image-slice:27 27 27 27

Border-image-repeat:stretch

} / * stretch * /

.border-image-repeat {

Border:27px solid # 000

Border-image-source:url (http://img.xiaoho.com/2014/09/border.png);

Border-image-slice:27 27 27 27

Border-image-repeat:repeat

} / * repeat * /

.border-image-round {

Border:27px solid # 000

Border-image-source:url (http://img.xiaoho.com/2014/09/border.png);

Border-image-slice:27 27 27 27

Border-image-repeat:round

} / * surround * /

The effect is as follows:

Application

For the application, this frame image is so powerful that a grotesque frame can be created at random, so that the frame is no longer stuck to the traditional wireframe. Whether you adjust the slice value, repeat value, or output value, you can change a lot of new tricks, which we just showed when we did the demo presentation, so I'll use a picture to construct our arc rectangle as simple as possible.

Use pictures:

The effect is as follows:

The code is as follows:

Border-image-repeat

The answer to the sample analysis question about the css3 border-image frame image is shared here. I hope the above content can be of some help to everyone. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

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.