I. Compatibility
Whether the effect is good or not doesn't matter as much; the most important thing is compatibility. Conclusion: If you don't need to consider IE, you can use border-image with confidence. For details, please check caniuse.
Lower versions of Android and iOS Safari require vendor prefixes to take effect, and Opera also needs them. Therefore, for optimal compatibility, you should add all prefixes except for -ms- (IE11/IE Mobile 11 follow the standard specification, while versions below 11 do not support it at all).
II. Specific Syntax
Commonly used syntax:
border-image：url("bd.png") 10 20 30 40 repeat;
border-width: 10px 20px 30px 40px;
Note: 10 20 30 40 are the slicing positions, and units like px or em cannot be added; they must be numerical values (defaults to px) or percentages. The sample code indicates slicing lines at 10px from the top, 20px from the right, 30px from the bottom, and 40px from the left, creating a 9-patch grid with four cuts. These four parameters can be shorthand into 1, 2, or 3 values, following the same rules as border-width. The property name is border-image-slice.
If the repetition is the default stretch, the rule after slicing the 9-patch grid is that the four corners remain unchanged while the content of other cells is stretched.
The repeat parameter is also quite special because no-repeat does not exist; there are only repeat (repetition), round (tiling), and stretch (stretching). The default value is stretch. Note the difference between tiling and repetition:
For example, if you buy a 99.5m * 99.5m rough-cast house from Vanke and want to tile the floor with 1m * 1m square tiles. If it's "tiling" (round), sorry, these 1m tiles won't work—they need to be processed! How? Simple: each tile is compressed to 0.995m * 0.995m. Thus, tiling fills the entire area with complete units. If it's "repetition" (repeat), you just place the 1m * 1m tiles one by one from one corner. What happens when you reach the end and they don't fit? You just "snap" the tile from the middle, so you'll see many half-tiles at the edges of the house.
(Quoted from Detailed explanation of CSS3 border-image, applications, and jQuery plugins - Zhang Xinxu)
III. Tips
1. Keep border-width and border-image-slice values the same
This helps avoid image distortion caused by multiple scaling operations.
2. How to ensure the ends do not scale
Sometimes you need to ensure the two ends don't scale, such as with tab labels, where the left and right ends should remain fixed while only the middle part is stretched. The solution is as follows:
-
First, set the
top/bottomvalues ofborder-image-sliceto the image height and thebottom/topvalue to 0. This reduces the 9-patch grid by two rows (the middle row and either the bottom or top row). The remaining row is precisely the top or bottom row, so the left and right ends will not scale. -
Then set the
border-widthvalue to be the same asborder-image-slice. -
Position the child element absolutely relative to the parent and set a negative
margin(to place the child element on the parent's border).Since the parent's border already occupies the child element's space, the child must be set to
position: absolute;to remove it from the normal document flow so it doesn't take up space.
3. How to fill the center cell
In the standard border-image implementation, the center cell is not filled, while in -webkit- implementations, it is. Therefore, you need to do the following to ensure the center cell is filled:
-moz-border-image: url("../img/btn-half.png") fill 36 20 0 20;
-o-border-image: url("../img/btn-half.png") 36 20 0 20;
-webkit-border-image: url("../img/btn-half.png") 36 20 0 20;
border-image: url("../img/btn-half.png") fill 36 20 0 20;
Opera and Chrome share the same interpretation, which differs from the standard specification, while Mozilla follows the standard implementation.
No comments yet. Be the first to share your thoughts.