border-image-repeat

  • 版本:CSS3
  • 媒体:视觉

border-image-repeat语法:

border-image-repeat:[ stretch | repeat | round | space ]{1,2}

默认值stretch

适用于:所有元素,除table元素设置了border-collapse为collapse之外

继承性:无

动画性:否

计算值:指定值

border-image-repeat取值:

stretch:
指定用拉伸方式来填充边框背景图。
repeat:
指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。
round:
指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space:
指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

border-image-repeat说明:

设置或检索对象的边框图像的平铺方式。
  • 该属性用于指定边框背景图的填充方式。可定义0-2个参数值,即水平和垂直方向。如果2个值相同,可合并成1个,表示水平和垂直方向都用相同的方式填充边框背景图;如果2个值都为stretch,则可省略不写。
  • 对应的脚本特性为borderImageOutset

border-image-repeat兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-10.0 15.0-25.0 #1 5.1.7 #1 15.0-31.0 #1 10.5-14.0
版本 11.0 #1 15.0-18.0 #1
  1. 不支持 space 属性值。

border-image-repeat示例:

前端纯css做手机端自适应带边框的三角

那就是移动端带边框的三角用css怎么做,而且让它自适应移动端刚开始我也在网上找了方法但是很不理想,最后结合大家的想法自己写了个,经测试暂时完美兼容...3月3日

有趣的CSS题目(2): 从条纹边框的实现谈盒子模型

CSS·CSS分享到:开本系列,讨论一些有趣的CSS题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的CSS细节。解题不考虑兼容性...2016年9月29日

CSS各种边框背景大全

sqrt(2)-1)r(这里的r表示border-radius)5、条纹背景背景知识:CSS线性渐变,background-size案例一...2016年6月27日

CSS边框盒子模型详解

所以叫它盒子模型其中content(内容)又可以有两个元素width(宽)和height(高)CSS边框样式可以使用border-style来设置边框的样式...2016年3月25日

《CSS权威指南》学习记录——内边距、边框、外边距

这部分内容是根据w3c来学习的,等我看完第七章和第八章后再向里面加些内容框模型概述CSS假定每个元素都会生成一个或多个矩形框,称其为元素框...2016年6月2日

放到这个白色的div中是显示不出来的(被div的白色衬托的没有办法显示出边框)。要想解决这个问题,需要用到CSS3中的新属性——background-clip...2016年4月25日

用CSS边框图像让你的网站更漂亮

以及耐心调整CSS文件才能使你的网页看起来不错。然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码。这篇文章将告诉你如何做到!边框属性...2016年1月13日

CSS如何实现当鼠标放在图片上时改变边框2015-12-1920:00:56cnblogs.com我是代码努力人点击CSS如何实现当鼠标放在图片上时改变边框:建议:尽可能的手写代码...2015年12月19日

CSS3边框通过CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框-并且不需使用设计软件,比如PhotoShop。在本章中,您将学到以下边框属性...2015年3月22日

DIV+CSS虚线边框|CSS虚线下划线及虚线样式

css5.com/shili/s296.shtmlhttp://www.divcss5.com/rumen/r120.shtml一、四边为虚线边框border:1px dashed #000...2014年12月1日

CSS的border边框属性及其在CSS3中的新特性

这篇文章主要介绍了详解CSS的border边框属性及其在CSS3中的新特性,既涵盖了基础的边框宽度与颜色设置又讲到了CSS3中的图片边框及边框渐变...2016年10月11日

/css">p.one{border-style:solid;border-width:5px;border-color:chartreuse;border-left-style:dotted;}p...2016年10月19日

用CSS设置边框宽度为0.5px,可以使边框看起来更加细腻,特别是在移动端,设计师会有这样的要求。但遗憾的是,大多数Android手机并不能识别0.5px。因此我们可以使用CSS3来变通的实现0...2016年10月3日

超出边框内容的文字用省略号来代替(纯CSS样式)

的文字用省略号来代替(纯CSS样式):display:block;white-space:nowrap;//文本不会换行,文本会在在同一行上继续,直到遇到标签为止...2016年5月10日

汇总的CSS设置网页table边框样式,希望可以对大家有所帮助:1.上边框宽度以下是引用片段:语法:border-top-width:<值>  允许值:thin|medium|thick|<长度> ...2015年3月26日

在使用渐变时,需要配置后备background-color或者background-image属性,供不支持css3渐变的浏览器使用,css3渐变需要编码4个样式的声明...2014年10月28日

3. css3边框(上)

css3中边框主要包含:1. border-radius 2. box-shadow 3...2016年1月29日

HTML5与CSS3之新增的边框属性

border-radius是设置边框的的圆角属性设置方式为:​border-radius:1px2px3px4px。分别设置的为左上右下、左下右上圆角...2016年10月28日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册