23rd Chapter CSS Border Picture effect

This chapter studies the future development uses the reference content

https://www.qianduan.net/css3border-image-bian-kuang-tu-xiang-xiang-jie/

or Baidu

Non-typeset PDF to Word (don't want to typeset)

23rd Chapter CSS3 Border Picture effect
Learning Essentials:
1. Preliminary Study of attributes
2. Attribute Interpretation
3. Abbreviations and versions

This chapter mainly discusses the effect of the background of the border picture in CSS3 in HTML5, through which the new property makes the border more
Colorful.
A Attribute interpretation
CSS3 provides a new set of properties that can be used to embed a border in the form of a picture. This way, the border
You can customize it.
1.border-image-source
Introducing a background image address
Cutting into the background image
Width of border picture
2.border-image-slice
3.border-image-width
4.border-image-repeat
5.border-image-outset
6.border-image
How the border background picture is arranged
Border background expands outward
Shorthand for the above five properties
Two Attribute interpretation
To achieve the border background, we have certain requirements for the picture, otherwise the effect can not be fully reflected. Pictures can be
Understand it through the gongge of nine. We use the image of the website to teach the Internet.
As shown, the nine Gongge do not necessarily require the same size of each grid. Of course, if the same thing, make
The border background is relatively easy. For example, the following picture:

First, use Photoshop software to analyze the overall size of the standard nine Gongge and the size of each lattice. The most
result is that the total size of the picture is 81px Square, the size of the Four Corners is 27px Square, the remaining five corners are 27px.
Then, the first step: Create a box area, a rectangle of size 400x400. Then set the introduction border graph
like.
//Introduce border image
Border-image-source:url (border.png);
Only this sentence, the browser under the WebKit engine will see the shadow
of the slightest image in the four corners of the box block. And the other browsers don't see anything. This is caused by not setting the width of the border background image.
//Set border image width, upper right bottom left, can set four values
border-image-width:81px;
This sets the width of the border image, not the width of the border. When you set the border width, you will notice that the text
is offset. The width of the border image does not squeeze text.
//Set the width of the border
border-width:20px;
When the above setting is complete, the browser that supports the border background image will be covered in the full form of this picture in Four corners.
This time it is necessary to configure the display of the background image by introducing cutting properties.
//First, the border image width is set to 27px and a single-width-height consistent
border-image-width:27px;
Sets the size of the Cut property
Border-image-slice:27;
The 27 here does not need to set px pixels because it defaults to pixels. After setting 27, we find that the four corners of the border
are exactly four corners of orange. Then you can zoom in or out of this value gradually to experience its
change.
//Zoom in from 27 to 81, Four corners are scaled down, each showing a full image
border-image-slice:81;
Gradually reduced from 27 to 0, found that Four corners are slowly getting larger, with fill overall display a full image
border-image-slice:0 fill;
The above just sets a single pixel to represent the size of the four-edge cut, and you can set the percentage, floating point value, or
to set four different sizes respectively.
//33.5% approximately
border-image-slice:33.5%;

//Up/Down settings 27, left and right 0
border-image-slice:27 0;
If you want the border background to expand outward, you can expand the settings.
//Outward expansion 20px, can also be floating point value, such as 2.2
border-image-outset:20px;
After Four corners are set, we will set four variable display arrangement. Using the Border-image-repeat
property, there are four values to use, as shown in the following table:
Property
Description
Stretch
Specifies that the border background map is filled with a stretch. The default value. The
specifies that the border background map is populated with tiling. When the picture touches the boundary, it is truncated if the super
is over.
Repeat
Round
Space
Specifies that the border background map is populated with tiling. The picture dynamically adjusts the size of the picture according to the size of the border, until it fills the entire border exactly. The
specifies that the border background map is populated with tiling. The picture dynamically adjusts the spacing between the pictures according to the dimensions of the border, until the entire border is exactly covered.
//Stretch fill, of course, through the upper right bottom left to set four edges can be
Border-image-repeat:stretch;
Tile padding, over is truncated
Border-image-repeat:repeat;
Tile fills, resize the picture dynamically until the
Border-image-repeat:round is covered;
Tile fill, adjust the spacing of the picture dynamically until the
Border-image-repeat:space is covered;
A small example of another button
Div {
width:400px;
height:40px;
Border-image-source:url (button.png);
border-image-width:10px;
Border-image-slice:10 fill;
Border-image-repeat:stretch;
}

Three Abbreviations and versions
The Border-image shorthand format is simple, as follows:
border-image:< ' Border-image-source ' > | | < ' border-image-slice ' > [/
< ' border-image-width ' > | /< ' border-image-width ';? /< '
Border-image-outset ' >]? | | < ' border-image-repeat ' >
The above is an excerpt from the manual, converted into the actual format as follows:
Border-image:url (border.png) 27/27px round;
For supported browsers and versions, the following table is available:
Opera
11.5~12.1
No
Firefox
Chrome
Safari
Ie
No
Partial support with prefix required
Support with prefix required
3.5 ~ 14 4 ~ 14 3.1 ~ 5.1
No
No
No
No
Support without prefixes
15+
15+
15+
6+
11.0+
Compatibility plus Prefix
-webkit-border-image:url (border.png) 27/27px round;
-moz-border-image:url (border.png) 27/27px round;
-o-border-image:url (border.png) 27/27px round;
Border-image:url (border.png) 27/27px round;

23rd Chapter CSS Border Picture effect