I feel very sorry for my few hard-won fans, the front of the accompany study plan, because of work was destroyed by life. Why, if you ask? You know, too busy to write an article. But fans can rest assured that crooked Horse has already imagined itself as a donkey, trying to keep up with the carrots in front of it.

😂 embarrassingly, this article is not accompanied by a series of articles, but in the fifth chapter “beautiful Box”, a feeling.

Reading about border-radius, which mentions the fabled nine-grid technology, is a pitiful little more than a page long. The CSS property used by the nine grid technique is our hero today, border-image. Although this technique, as the book says, is rarely used. But it occurred to Him that he had been struggling for a long time to achieve an effect that was just right for border-image.

Based on this effect, this paper will first show you the effect of using border-image, summarize and suggest where to use border-image, and then quickly explain the relevant syntax for those who want to try it.

1. Effect: How to achieve a rounded rectangle with cut corners

A long, long time ago, Crooked horse received the following design (partial).

Rounded rectangle with cut corners

Make sure you wiggle your finger and zoom in. The four rounded rectangles cut off one corner to form an irregular shape with a glowing border with a certain blur on both sides.

When you look at it, you can say, well, it’s not easy. Just cut four images and use them as the background. But there is an additional requirement for this place that the size of each rectangle is not fixed. If we simply use the background, the image will be distorted at different sizes. That’s obviously not what we’re looking for.

In order to be flexible, the author used some extremely cumbersome ways to implement it, and there are certain limitations in the end. I could write another article about the trouble. So we won’t say it here, because it’s embarrassing to say it.

When I read about the sudoku technique the night before yesterday, I suddenly had an Epiphany. Why didn’t I use sudoku when I achieved this effect? Did I not know? No, I know. So why don’t I use it? It’s actually because I don’t know any usage scenarios other than the ones mentioned in the general usage guide that I don’t even know how to use.

Now I can tell you that the border-image is particularly good for similar scenarios where the four edges are unique and the middle area is repeated. The design of a large screen class may have many special blocks, some of which are suitable for border-image implementation. Of course, the conventional picture frame also suits to use nine grids.

Having said that, let’s take a look at how to achieve the above effect, using the lower right corner of the rounded rectangle as an example.

Due to the author’s material reasons, the background can only be used in dark blue. In the case of a designer, have them export a transparent PNG image that can be adapted to any scene.

Code:

.border-image-demo {
  border: 150px solid transparent;
  border-image: url(./border-image3.png) 250 repeat;
}
Copy the code

Effect:

The lower right corner is the rounded rectangle of the corner cut

As shown above, with two lines of core code (online sample), we have achieved a similar effect on the design draft, which is really not too simple. Border is used to configure the border, and border-image is used to configure the border image. We’ll talk about how to do that.

In addition to the above effect, the title picture of today’s article is also achieved by using border-image. If you are interested, you can see the example of title picture.

Pictured above effect

A quick explanation of the usage of border-image



?

? . Border-image-source is mandatory. The other two values can be omitted. This is a simpler use of border-image, an abbreviated form that can be broken down into a number of individual attributes, which we’ll cover below.


In the following, Wima will explain in a simple and quick way and will not post any more examples. You can do it yourself. You have to do it yourself to be impressed.

Note that the border attribute must be specified at the same time, otherwise you may not see the effect.

1. border-image-source

This property is used to pass in the image source as the border image. All values that can be placed in url() can be used, including SVG/Base64/CSS Gradient, etc.

2. border-image-slice

This property is used to specify how to cut the border image. It mainly controls four cutting lines to cut the image into nine pieces. As shown in the picture below, there are four lines: top, right, bottom and left.

Border-image-slice cutting effect

This property accepts up to four positive unitary numbers or percentages. The initial value is 100%. The order of values corresponds to the positions of the top, right, bottom and left cutting lines. If there are fewer than four values, the missing value in one direction is equal to the opposite value. If there is only one value, then all sides use it.

This value also has an optional keyword fill parameter that can be used to preserve the middle region, which is discarded by default.

3. border-image-repeat

This property specifies the number of duplicates of images on each side of the border-image in addition to the four cut corners.

A maximum of two values can be specified. If there is only one value, it is used for all edges. If there are two values, the first value controls the horizontal edge and the second controls the vertical edge.

The following keywords are supported, where tile refers to the image block cut from the border-image-slice:

'round' : avoid cutting tiles unless they are exactly right. 'space' : repeat tiles, if they can't be filled with spaceCopy the code

4. border-image-outset

This property is used to specify the distance of the border image area beyond the sidebar. The default value is 0. It’s like moving the border out of the image.

4. border-image-width

This property is used to specify the width of the border picture, and supports percentages, ununitless values, and auto. A maximum of four values can be accepted, and the reuse logic for values is similar to the above. Where the unsigned unit is multiplied by border-width as the final width.

This property can be used in conjunction with border-image-outset to create a box with a small initial border that does not affect the display of content in the original box. As shown below:

Border-image-width is compatible with border-image-outset

The above picture shows the screenshot effect under Chrome. The yellow area is the margin area, and the thin inside area is the 4px border I set. It then moves the image border outward through the border-image-width and border-image-outset to have less effect on the original box.

Third, summary

In this paper, a real design draft is taken as an example to introduce the actual application scenario of border-image. I hope you can remember this technology when you encounter similar scenarios in the future. Then, crooked horse again quickly took you over the relevant attributes.

I believe that after this article, you not only know where to use, but also know how to use.

Finally, try something you don’t understand.

Refer to the link

  1. Understanding border-image
  2. Border-image of the CSS property

If you like, please scan the code to follow my public account, I will read regularly, and share some other front-end knowledge yo.