CSS3 Tutorial-border-image Properties

Today, Tracy sister to you to explain CSS3 tutorial-the last property of the border: Border-image property. This article mainly introduces the definition and usage of this property, hoping to help the students who need help in the front-end development work.

Take a look at the specific examples:

Specify the picture as the bounding rectangle that surrounds the div element:

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

Browser support:

Internet Explorer One, Firefox, Opera, Chrome and Safari 6 support the Border-image property.

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

Definition and Usage:

The Border-image property is a shorthand property that sets the following properties:

Border-image-source;

Border-image-slice;

Border-image-width;

Border-image-outset;

Border-image-repeat;

If the value is omitted, its default value is set.

Tip: Use the border-image-* property to construct beautiful, scalable buttons!

Possible values:

The above is the content of CSS3 Tutorial-border-image property, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

