80th section, CSS3 border picture effect

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, 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.

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. 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 81p Square, the size of Four Corners is 27p Square, the remaining five corners are 27p. So, the first step: Create a box area, a rectangle of size 400x400. Then set the incoming border image.

Border-image-source Introducing Border Images

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.

P {    width: 400px;     height: 300px;     border-image-source: url (border.png);} <p> is a company owned by the North Green media </p>

Border-image-width set the border image width, upper right bottom left, you can set four values

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.

P {    width: 400px;     height: 300px;     border-image-source: url (border.png);     border-image-width: 81px;} <p> is a company owned by the North Green media </p>

Border-width Setting the width of the border

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.

P {    width: 400px;     height: 300px;     border-image-source: url (border.png);     border-image-width: 81px;     border-width: 20px;} <p> is a company owned by the North Green media </p>

Border-image-slice setting the size of the Cut property

The 27 here does not need to set the P-pixel, 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.

P {    width: 400px;     height: 300px;     border-image-source: url (border.png);     border-image-width: 27px;     border-width: 20px;     border-image-slice: N;} <p> is a company owned by the North Green media </p>

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 20p, 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 a tiled way to fill the border background. 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

div {

width:400px;

height:40px;

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

border-image-width:10px;

Border-image-slice:10fill;

Border-image-repeat:stretch;

}

Three Abbreviations and versions

Border-image:url (border.png) 27/27p round;

For supported browsers and versions, the following table is available:

Opera firefo Chrome Safari IE

Partial support requires prefix 11.5~12.1 3.5 ~ 14 4 ~ 14 3.1~5.1 None

Support requires a prefix no no no no no no

Support without prefix 15+ 15+ 15+ 6+ 11.0+

Compatibility plus Prefix

P {    width: 400px;     height: 300px;     -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;} <p> is a company owned by the North Green media </p>

80th section, CSS3 border picture effect