CSS |边框-图像-重复属性
原文:https://www . geesforgeks . org/CSS-border-image-repeat-property/
CSS 中的边框-图像-重复属性用于缩放和平铺边框图像。它可以用来匹配边框图像的中间部分和边框的大小。它可以有一个或两个值。一个用于水平轴，一个用于垂直轴。只给出一个值，那么它适用于所有边，但是给出两个值，一个值用于水平边，另一个值用于垂直边。
语法:
border-image-repeat: stretch|repeat|round|initial|inherit
属性值:
拉伸:为默认值，用于拉伸图像填充区域。
-
语法:
html border-image-repeat: stretch; -
例:
```html <!DOCTYPE html>
CSS border-image-repeat Propertyh2 { border: 20px solid transparent; padding: 20px; border-image-source: url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); border-image-repeat: stretch; border-image-slice: 40; text-align:center; }
border-image-repeat: stretch;
``` -
输出:
![stretch]()
重复:此属性用于重复背景图像。
-
语法:
html border-image-repeat: repeat; -
例:
```html <!DOCTYPE html>
CSS border-image-repeat Propertyh2 { border: 20px solid transparent; padding: 20px; border-image-source: url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); border-image-repeat: repeat; border-image-slice: 40; text-align:center; }
border-image-repeat: repeat;
``` -
输出:
![stretch]()
round: 用于重复图像填充区域。如果图像没有填满所有图块中的区域，图像将被重新缩放。
-
语法:
html border-image-repeat: round; -
例:
```html <!DOCTYPE html>
CSS border-image-repeat Propertyh2 { border: 20px solid transparent; padding: 20px; border-image-source: url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); border-image-repeat: round; border-image-slice: 40; text-align:center; }
border-image-repeat: round;
``` -
输出:
![stretch]()
初始值:用于将边框-图像-重复属性设置为默认值。
-
语法:
html border-image-repeat: initial; -
例:
```html <!DOCTYPE html>
CSS border-image-repeat Propertyh2 { border: 20px solid transparent; padding: 20px; border-image-source: url(https://media.geeksforgeeks.org/wp-content/uploads/border2-2.png); border-image-repeat: initial; border-image-slice: 40; text-align:center; }
border-image-repeat: initial;
``` -
输出:
![stretch]()
继承:用于从其父级设置边框-图像-重复属性。
支持的浏览器:边框-图像-重复属性支持的浏览器如下:
- 谷歌 Chrome 15.0
- Internet Explorer 11.0
- Firefox 15.0
- Opera 15.0
- Safari 6.0
版权属于：月萌API www.moonapi.com，转载请注明出处
