CSS3 tutorial-border-image property

Today, Sister Cui'er will explain to you the CSS3 tutorial-the last attribute of the border: the border-image attribute. This article mainly introduces the definition and usage of this attribute, hoping to help students who need help in front-end development work.

Look at a specific example:

Specify the image as a border surrounding the div element:

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Browser support:

Internet Explorer 11, Firefox, Opera 15, Chrome and Safari 6 support the border-image attribute.

Safari 5 supports an alternative -webkit-border-image attribute.

Definition and usage:

border-image property is a shorthand property used to set the following properties:

border-image-source;

border -image-slice;

border-image-width;

border-image-outset;

border-image-repeat;

If value is omitted , its default value will be set.

Tip: Please use border-image-* properties to construct beautiful scalable buttons!

Possible values:

The above is the content of CSS3 tutorial-border-image attribute, more related content Please pay attention to the PHP Chinese website (www.php.cn)!