Chapter 2 CSS3 border image effects-Original Water

Chapter 4 CSS3 border image effects-original learning points of water:

1. Initial Research on Attributes

2. Attribute explanation

3. Abbreviations and versions

Lecturer: Li Yanhui

This chapter mainly discusses the effects of border image backgrounds in CSS3 in HTML5. This new attribute makes borders more colorful.

1. Attribute explanation

CSS3 provides a new set of attributes, which can be used to embed border images. In this way, the border can be customized.

1. border-image-source // introduce the background image address
2. border-image-slice // cut the background image
3. border-image-width // border image width
4. border-image-repeat // arrange the border background image
5. border-image-outset // The border background expands outward
6. border-image // shorthand for the preceding five attributes

Ii. Attribute explanation

To implement the border background, we also have certain requirements on the image, otherwise the effect cannot be fully reflected. The image can be learned through the segmentation of the jiugongge. We will use the pictures on the W3C official website to explain.

As shown in, the size of each cell is not necessarily the same. Of course, if they are the same, it is easier to create a border background. For example:

First, use Photoshop software to analyze the overall size of the standard nine cells and the size of each cell. The final result shows that the total size of the image is 81px Square, the four corners are 27px square, and the remaining five corners are 27px.

The first step is to create a box with a rectangle of 400x400. Then set the border image to be introduced.

// Introduce the border image

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

In this case, the browser under the webkit engine will see a tiny image in the four corners of the box block. Other browsers cannot see anything. This is because the border background image width is not set.

// Set the border image width, top right bottom left, four values

border-image-width: 81px;

The border image width is set here, instead of the Border width. When you set the Border width, you will find that the text is offset. The border image width does not squeeze text.

// Set the Border Width

border-width: 20px;

After the preceding settings are complete, the browser that supports the border background image will put the complete form of the image in four corners. In this case, you need to introduce the cutting attribute to configure the display mode of the background image.

// First, set the border image width to 27px consistent with the width and height of a single cell.

border-image-width: 27px;

// Set the Cut attribute size

border-image-slice: 27;

Here 27 does not need to be set to px, because it is a pixel by default. After setting 27, we will find that the four corners of the border are exactly the four corners of orange. Then you can gradually zoom in or gradually drop this value to experience its changes.

// Gradually zoom in from 27 to 81, and gradually zoom out the four corners to display a complete image.

border-image-slice: 81;

// Gradually scale down from 27 to 0, and find that the four corners gradually become larger. In combination with fill, a complete image is displayed.

border-image-slice: 0 fill;

The above only sets a single pixel to indicate the size of the Four Edges. You can also set the percentage, floating point value, or four different sizes.

// 33.5% almost 27

border-image-slice: 33.5%;

// Set up/down to 27 and left to 0

border-image-slice: 27 0;

If you want to expand the border background, you can set expansion.

// Expand outward by 20 PX, which can also be a floating point value, such as 2.2

border-image-outset: 20px;

After setting the four corners, we need to set four display arrangement modes. Use the border-image-repeat attribute. Four values are available, as shown in the following table:

Attribute	Description
Stretch	Specify to fill the border background image in stretch mode. Default value.
Repeat	Specifies to fill the border background image in tile mode. When an image encounters a boundary, it is truncated if it exceeds the boundary.
Round	Specifies to fill the border background image in tile mode. The image dynamically adjusts the size of the image based on the size of the border until the entire border can be filled.
Space	Specifies to fill the border background image in tile mode. The image dynamically adjusts the spacing between images based on the size of the border until the entire border can be filled.

// Fill in the stretch mode. Of course, you can set up four sides on the upper right and lower left.

border-image-repeat: stretch;

// Tiled filling. If the value exceeds the upper limit, it is truncated.

border-image-repeat: repeat;

// Tile filling, dynamically adjust the image size until it is full

border-image-repeat: round;

// Tile filling, dynamically adjust the image spacing until it is full

border-image-repeat: space;

// A small example of another button

p {    width: 400px;    height: 40px;    border-image-source: url(button.png);    border-image-width: 10px;    border-image-slice: 10 fill;    border-image-repeat: stretch;}

Iii. Abbreviations and versions

// The abbreviated format of border-image is 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. The actual format is as follows:

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

The following table lists supported browsers and versions:

	Opera	Firefox	Chrome	Safari	IE
Some support must have a prefix	11.5 ~ 12.1	3.5 ~ 14	4 ~ 14	3.1 ~ 5.1	None
Prefix required	None	None	None	None	None
No prefix is supported.	15 +	15 +	15 +	6 +	11.0 +

// Prefix for compatibility

-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;