小白教程
所有教程
关于
Search
172.70.130.223
172.70.130.223
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Css3 pr border image repeat”的源代码
本页内容
上一节:
Css3_pr_border_image_outset
下一节:
Css3_pr_border_image_slice
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:border-image-repeat}}[[Category:css reference|76]] = CSS3 border-image-repeat 属性 = 设置重复图像的方式: <sample title="" desc="" lang="html" hererun="1"> div { border-image-source: url(border.png); border-image-repeat: repeat; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <style> div { background-color: lightgrey; border: 30px solid transparent; border-image: url('border.png'); border-image-slice: 30; border-image-repeat: repeat; } </style> </head> <body> <div> DIV 使用图像边框。 </div> <p>使用的图片:</p> <img src="border.png"> <p><b>注意: </b>Internet Explorer 10, Opera 12, 和 Safari 5 不支持 border-image-repeat 属性。</p> </body> </html> </run> == 定义和使用 == border-image-repeat 属性用于图像边界是否应重复(repeated)、拉伸(stretched)或铺满(rounded)。 '''提示:'''你可以查看 [[css3 pr border image|border-image]] 属性 (简写属性用于设置所有 border-image-* 属性)。 {| class="table table-striped table-hover" |width="50%"| 默认值: |width="50%"| stretch |- | 继承性: | no |- | 动画: | no. [[css animatable|查看 animatable]] |- | 版本: | CSS3 |- | JavaScript 语法: | object.style.borderImageRepeat="round" <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { background-color: lightgrey; border: 30px solid transparent; border-image: url('border.png'); border-image-slice: 30 30 30 30; border-image-width: 1 1 1 1; border-image-outset: 0; border-image-repeat: stretch; } </style> </head> <body> <div id="main"> <p> DIV 使用图像边框。 </p> </div> <p>点击 “点我” 按钮来设置 borderImageRepeat 属性的值为 "round"。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { document.getElementById("main").style.borderImageRepeat = "round"; } </script> <p><b>注意: </b>Internet Explorer 10, Opera 12, 和 Safari 5 不支持 border-image-repeat 属性。</p> </body> </html> </run> |} == 浏览器支持 == 表格中的数字表示支持该事件的第一个浏览器的版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer ! Firefox ! Safari ! Opera |- | border-image-repeat | 15.0 | 11.0 | 15.0 | 6.0 | 15.0 |} == CSS 语法 == border-image-repeat: stretch|repeat|round|initial|inherit; '''注意:''' 该属性规定如何延展和铺排边框图像的边缘和中间部分。因此,您可以规定两个值。如果省略第二个值,则采取与第一个值相同的值。 == 属性值 == {| class="table table-striped table-hover" ! 值 ! 描述 ! 实例 |- | stretch | 默认值。拉伸图像来填充区域 | [[playit.php?f=playcss_border image repeat&preval=stretch|查看实例 »]] |- | repeat | 平铺(repeated)图像来填充区域。 | [[playit.php?f=playcss_border image repeat&preval=repeat|查看实例 »]] |- | round | 类似 repeat 值。如果无法完整平铺所有图像,则对图像进行缩放以适应区域。 | [[playit.php?f=playcss_border image repeat&preval=round|查看实例 »]] |- | space | 类似 repeat 值。如果无法完整平铺所有图像,扩展空间会分布在图像周围 | |- | initial | 将此属性设置为默认值。[[css initial|查看 initial]] | [[playit.php?f=playcss_border image repeat&preval=initial|查看实例 »]] |- | inherit | 从父元素中继承该属性。 [[css inherit|查看 inherit]] | |} == 相关页面 == CSS3 教程: [[css3 borders|CSS3 边框]] CSS 参考手册: [[css3 pr border image|border-image 属性]] CSS 参考手册: [[css3 pr border image repeat|border-image-repeat 属性]] CSS 参考手册: [[css3 pr border image slice|border-image-slice 属性]] CSS 参考手册: [[css3 pr border image source|border-image-source 属性]] CSS 参考手册: [[css3 pr border image width|border-image-width 属性]] HTML DOM 参考手册: [[prop style borderimagerepeat|borderImageRepeat 属性]]
返回至“
Css3 pr border image repeat
”。
上一节:
Css3_pr_border_image_outset
下一节:
Css3_pr_border_image_slice