border-image:none|image-url|number|percentage|stretch,repeat,round

参数:

none:默认,无背景图片

url:地址,可以为绝对,也可以相对

number:切割背景图片的边框大小一共可以有1-4个值,上,右,下,左

percentage:功能同number,只是它用的是百分比,number为数字(不用写单位,单位为px)

stretch:拉伸

round:平铺

repeat:重复边框背景

1、边框背景图切割时,处于四个角的地方不动,平铺,拉伸,重复只针对四边,不包括四角。

【原始边框背景图】

.border-img{
width: 200px;
border: 20px solid;
-webkit-border-image: url("picture/12.png") 95 100 85 105 stretch;
border-image: url("picture/12.png") 95 100 85 105 stretch;
}
    
   <div class="border-img">border-img</div>

  

CSS3的border-image的更多相关文章

  1. css3学习--border

    http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...

  2. css3实现border渐变色

    案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient ...

  3. css3 做border = 0.5px的细线

    参考: https://blog.csdn.net/Tyro_java/article/details/52013531

  4. CSS3 用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...

  5. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  6. css3图形绘制

    以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(bo ...

  7. css3之图形绘制

    由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...

  8. 总结html

    1.初识html W3C : 万维网联盟!(World Wide Web Consortium )   创建于1994年,是web技术领域最权威最具有影响力的标准机构!           W3C规定 ...

  9. 你务必知道的css简写

    欢迎加入前端交流群来py:749539640   简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性.使用简写属性,Web 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. ...

  10. CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)

    CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...

随机推荐

  1. PyAudio 实现录音 自动化交互实现问答

    Python 很强大其原因就是因为它庞大的三方库 , 资源是非常的丰富 , 当然也不会缺少关于音频的库 关于音频, PyAudio 这个库, 可以实现开启麦克风录音, 可以播放音频文件等等,此刻我们不 ...

  2. 洛谷1072(gcd的运用)

    已知正整数a0,a1,b0,b1,设某未知正整数x满足: 1. x 和 a0 的最大公约数是 a1​: 2. x 和 b0​ 的最小公倍数是b1. Hankson 的“逆问题”就是求出满足条件的正整数 ...

  3. (洛谷P2512||bzoj1045) [HAOI2008]糖果传递 || 洛谷P4016 负载平衡问题 || UVA11300 Spreading the Wealth || (洛谷P3156||bzoj3293) [CQOI2011]分金币

    bzoj1045 洛谷P4016 洛谷P2512 bzoj3293 洛谷P3156 题解:https://www.luogu.org/blog/LittleRewriter/solution-p251 ...

  4. Retrofit实现Delete请求

    //设置取消关注 @Headers("Content-Type:application/x-www-form-urlencoded") @HTTP(method = "D ...

  5. python学习之列表元组,字典

    list:元素性质可以不一致,元素还可以是list,可类似数组方法进行索引(也可以用负数索引,-1表示最后一个),可用.append('')进行动态增加,可用pop()删除最后一个或者pop(i)删除 ...

  6. php __autoload函数 加载类文件

    面向对象的开发时,大家肯定都会遇到这样的问题,就是加载文件,一般都是加文件的头部inclue_once,require一大堆,看着很让人烦.当然你可以自己写程序来加载.php5以后引入了__autol ...

  7. SVM为什么需要核函数

    生存?还是毁灭?——哈姆雷特 可分?还是不可分?——支持向量机 之前一直在讨论的线性分类器,器如其名(汗,这是什么说法啊),只能对线性可分的样本做处理.如果提供的样本线性不可分,结果很简单,线性分类器 ...

  8. 爬虫的两种解析方式 xpath和bs4

    1.xpath解析 from lxml import etree 两种方式使用:将html文档变成一个对象,然后调用对象的方法去查找指定的节点 (1)本地文件 tree = etree.parse(文 ...

  9. Linux下环境搭建(一)——java、tomcat配置

    通过2个周末小憩的时间,终究是把linux环境下的jenkins+gitlab+jmeter框架给弄好了.jenkins的配置系列文章,可以翻看我以前的博文.此次,就将在linux下搭建环境的过程以博 ...

  10. sqlite的应用

    对于Android平台来说,系统内置了丰富的API来供开发人员操作SQLite,我们可以轻松的完成对数据的存取.下面就向大家介绍一下SQLite常用的操作方法.本篇文章主要用到SQLiteDataba ...