CSS reference manual

CSS @rules

CSS attribute大全

CSS3 border-image-slice Attribute CSS3 border-image-outset Attribute

CSS3 border-image-Usage and examples of the 'repeat' attribute

border-image-The 'repeat' CSS property specifies how to scale or tile the middle part of the border image to match the size of the border.

The following table describes the usage and version history of this attribute, as well as the syntax of the attribute in the JavaScript script.

Default value:	stretch
Applies to:	All elements, but when the table element (such as tr, th, td) has a border-The 'collapse' attribute value is 'collapse' for border-image-The 'repeat' attribute is invalid. It also applies to::first-letter.
Inheritance:	None
Animatable:	No.Please see Animation Attribute.
Version:	CSS3new feature
JavaScript Syntax:	object.style.borderImageRepeat="round"

border-image-repeat Syntax Usage

The syntax of this attribute is as follows:

border-image-repeat: [ stretch | repeat | round | space ]　1　or　2　values | initial | inherit

The following example demonstrates how to use border-image-repeat Attribute.

Example

.box {
　　　　width:　300px;
　　　　height:　150px;
　　　　border:　15px solid transparent;
　　　　border-image-source: url("border.png");
　　　　border-image-slice:　30;
　　　　border-image-repeat: round;
}

Test to see‹/›

Attribute Value

The table below describes the value of this attribute.

Value	Description
stretch	The image is stretched to fill the area between the border edges. This is the default value.
repeat	The image is tiled or repeated until it fills the area between the border edges.
round	The image is tiled or repeated until it fills the area between the border edges. If the area cannot be filled with a complete number of blocks, the image is scaled to make it scale.
space	The image is tiled or repeated until it fills the area between the border edges. If the area cannot be filled with all tiles, the extra space will be distributed around the tiles.
initial	Set this attribute to its default value.
inherit	If specified, the associated element adopts its parent element's border-image-Calculated Value of repeat Attribute.

Browser Compatibility

border-image-Browser Compatibility of repeat Attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

	Firefox 15+ Google Chrome15+ Internet Explorer 11+ Apple Safari 6+ Opera 15+

Please refer to the tutorial:CSS3Border,CSS Border.