CSS3 border-image-sliceProperty
Example
Specify the boundary of the image to offset inward:
div
{
border-image-source: url(border.png);
border-image-slice: 50% 50%;
}
Browser Support
The numbers in the table indicate the first browser version number that supports the property.
| Property | |||||
|---|---|---|---|---|---|
| border-image-slice | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |
Attribute definition and usage instructions
The border-image-slice property specifies the inward offsets of the image's borders.
| Default Value: | 100% |
|---|---|
| Inherited: | no |
| version: | CSS3 |
| JavaScript Syntax: | object.style.borderImageSlice="50% 50%" |
Syntax
border-image-slice: number|%|fill;
Note:thisPropertySpecified顶部，Right，Footer，LeftEdge缘ofimagetowardinsideOffset，Divideis九itemsRegion：fouritems角，fourEdgeandmiddle。imagemiddlePartwillBydiscard（完全透明ofprocessing），unless填writeKeyword.if省略No.fournumberCharacter/percentage, itand the二itemssame.ifalso省略alreadyNo.threeone,itand theaYessame.ifalso省略alreadyNo.二one,itand theaYessame.
| Value | Description |
|---|---|
| number | Numbers represent the pixels of the image (for raster images) or the coordinates of vectors (if the image is a vector image). |
| % | Percentages are relative to the size of the image: horizontal offsets are relative to the image's width, and vertical offsets are relative to the image's height. |
| fill | Preserve the middle portion of the image |