29.CSS3 Border Picture Effect

23rd Chapter CSS Border Picture effect

First, attribute interpretation

you can embed a border in the form of a picture with several attributes.

1,border-image-source: Introduce the background image address

2,border-image-slice: cutting into the background image

3,border-image-width: The width of the border picture

4.border-image-repeat: How to arrange the border background picture

5.border-image-outset: Border background expands outward

6,border-image: The first five properties of the shorthand way

Second, attribute interpretation

First, use Photoshop Software analyzes the overall size of this standard nine Gongge and the size of each lattice, the final picture is the total size of 81px Square, Four corners of the size of 27px Square, , the remaining five corners are also 27px.

So, the first step is to create a box area, a rectangle of size 400*400, and then set the incoming border image.

Introducing Border Images

Border-image-source:url (border.png)// If thisis the only word, the browser underWebKit engine will be seen in the four corners of the box block

A little image of the shadow, and other browsers can see nothing, this is due to the width of the border background picture is not set caused.

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 set, the text is found to be offset, and the width of the border image does not backlog text.

Set Border Width

Border-width:20px;

when the above setting is complete, the browser that supports the border will be covered in the full form of this picture in Four corners. This time you need to introduce the cut properties to configure how the background image is displayed

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; There is no need to set px pixels, because it defaults to pixels,

from the gradually enlarged to Bayi, Four corners are slowly shrinking, each showing a complete image

border-image-slice:81;

gradually reduced from 0, found that four corners are slowly becoming larger, with fill Overall display a complete image

Border-image-slice:0 fill;

33.5% is almost

up and down settings , left and right set 0;

Outward expansion 20px, can also be a floating point number, such as 2.2;

after Four Corners are set, we will set the display arrangement of four points. Using The Border-image-repeat property, there are four values that provide the use of

Properties Description

Stretch Specifies that the border background image is filled with a 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 frame 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 it can fill the entire frame exactly.

stretched to fill, with four edges on top right and bottom left

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;

fills the tile, dynamically adjusts the picture spacing until it is covered

Border-image-repeat;space;

Third, shorthand form

The border-image shorthand format is as follows:

border-image:< ' Border-image-source ' >| | < ' border-image-slice ' >[/< ' border-image-width ' >]|/< ' border-image-width ' >?/< ' Border-image-outset ' >]?| | < ' border-image-repeat ' >

shorthand format: border-image:url(border.png) 27/27/px round;

for supported versions, the following

Opera Firefox Chrome IE Safari

         partial support requires prefix     11.5~ 12.1    3.5 ~ 14    4 Span style= "font-family: Arial" >~ 14    3.1 ~ 5.1     no

support with prefix required No no no no no no

support without prefix 15+ 15+ 15+ 6+ 11.0+

compatibility plus prefix

-webkit-border-image:url(border.png) 27/27/px round;

-moz--border-image:url(border.png) 27/27/px round;

-o-border-image:url(border.png) 27/27/px round;

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

29.CSS3 Border Picture Effect