23rd Chapter CSS3 Border Picture effect

Learning Essentials:

1. Preliminary Study of attributes

2. Attribute Interpretation

3. Abbreviations and versions

Keynote Teacher: Li Tinghui

This chapter mainly discusses the effect of the background of the border picture in CSS3 in HTML5, and makes the border more colorful by this new property.

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 allows the border to be customized.

1.border-image-source//introduction of background image address
2.border-image-slice//Cutting Introduction background image
3.border-image-width//width of the border picture
4.border-image-repeat//Border background picture arrangement
5.border-image-outset//Border background expands outward
6.border-image//shorthand for five properties above

two. Attribute Interpretation

To achieve the border background, we have certain requirements for the picture, otherwise the effect can not be fully reflected. The picture can be understood by the gongge of the nine slices. 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, it's relatively easy to make a border background if it's the same. 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. Finally, the total size of the picture is 81px Square, the size of Four Corners is 27px Square, the remaining five corners are 27px.

So, the first step: Create a box area, a rectangle of size 400x400. Then set the incoming border image.

Introducing Border Images

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

Only this sentence, the browser under the WebKit engine will see the shadow of a tiny 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 the 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 is the time to configure how the background image is displayed by introducing the cut properties.

First, the width of the border image is set to 27PX and a single width of height consistent

border-image-width:27px;

To set the size of a 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 will find that the four corners of the border are exactly four corners of orange. Then you can gradually zoom in or gradually drop this value, to experience its changes.

Zoom in from 27 to 81, Four corners slowly, each showing a complete image

border-image-slice:81;

Gradually reduced from 27 to 0, found that Four corners are slowly growing, with fill overall display a full image

border-image-slice:0 fill;

The above only sets a single pixel to represent the size of the four edge cuts, you can also set the percentage, floating point value, or set four variable size respectively.

33.5% almost 27

border-image-slice:33.5%;

Up and down settings 27, left and right settings 0

Border-image-slice:27 0;

If you want the border background to expand outward, you can expand the settings.

Expands outward by 20px, or it can be a 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 available, respectively, as shown in the following table:

Property	Description
Stretch	Specifies that the border background map is filled with stretch. The default value.
Repeat	Specifies that the border background map is populated with tiling. When the picture touches the border, it is truncated if it is exceeded.
Round	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.
Space	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.

Stretching mode fills, of course, by setting four edges on the top right and bottom left to

Border-image-repeat:stretch;

Tile padding, exceeding is truncated

Border-image-repeat:repeat;

Tile the fill, resize the picture dynamically until it is covered

Border-image-repeat:round;

Tile fill to dynamically adjust the spacing of the picture until it is fully covered

Border-image-repeat:space;

A small example of another button

{    width: 400px;     height: 40px;     border-image-source: url (button.png);     border-image-width: 10px;     border-image-slice: 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 ' > |/& lt; ' 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	Firefox	Chrome	Safari	Ie
Partial support with prefix required	11.5~12.1	3.5 ~ 14	4 ~ 14	3.1 ~ 5.1	No
Support with prefix required	No	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 CSS3 Border Picture effect