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. bzoj1145[CTSC2008]图腾

    传送门 虽然是远古时期的ctsc,但是果然还是ctsc啊 前置芝士:树状数组 这个题最开始的思路很好想,由于之前写过一个类似处理的题,所以这个题我一开始就想到了思路. 首先,我们可以尝试讲图腾表示为x ...

  2. 关于js对象参数的讨论 用街道类比

    var obj = { p: 1 }; function f(o) { o.p = 2; } f(obj); obj.p 上面代码中,传入函数f的是参数对象obj的地址.因此,在函数内部修改obj的属 ...

  3. sublime text 插件的删除方法

    1.ctr+shift+P,输入Package Control: Remove Package 2.回车, 3.出现一个弹出框,输入你要删除的package 4.回车,OK!!!

  4. Django (五) modeld进阶

    day 05 models进阶 1.models基本操作   django中遵循 Code Frist 的原则,即:根据代码中定义的类来自动生成数据库表. 对于ORM框架里: 我们写的类表示数据库的表 ...

  5. 描述符__get__,__set__,__delete__和析构方法__del__

    描述符__get__,__set__,__delete__ 1.描述符是什么:描述符本质就是一个新式类,在这个新式类中,至少实现了__get__(),__set__(),__delete__()中的一 ...

  6. Technocup 2017 - Elimination Round 1 (Unofficially Open for Everyone, Rated for Div. 2) C

    This is an interactive problem. You should use flush operation after each printed line. For example, ...

  7. PARTITION RANGE ALL 的优化

    建议如下: 检查数据库的cpu 消耗 ,Sql_id :***** 消耗过多资源,这个新上线sql, 20号才上线,是对log 进行分析,平均每次执行时间300s.,使用的是PARTITION RAN ...

  8. python_15(jquery)

    第1章 iquery 1.1 官网 1.2 流程图 1.3 Javascripts方法 1.4 书写格式 1.5 jQuery 的两大特 1.6 对比javascript代码量 第2章 入口函数(重要 ...

  9. Mongodb JAVA API

    连接mongodb 1.连接一个mongodb ); 2.连接mongodb集群 MongoClient mongoClient = ), new ServerAddress("localh ...

  10. 利用自定义消息处理函数的WPARAM或LPARAM参数传递指针

    有自定义消息: #define WM_TEST WM_USER+121 消息处理函数: afx_msg void OnTest(WPARAM wParam,LPARAM lParam); 该消息是一个 ...