23rd Chapter CSS3 Border Picture effect

Source: Internet
Author: User
Tags border image new set truncated

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


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


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


To set the size of a cut property


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


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


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


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:




Specifies that the border background map is filled with stretch. The default value.


Specifies that the border background map is populated with tiling. When the picture touches the border, it is truncated if it is exceeded.


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.


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


Tile padding, exceeding is truncated


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


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


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:






Partial support with prefix required


3.5 ~ 14

4 ~ 14

3.1 ~ 5.1


Support with prefix required






Support without prefixes






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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.