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. bzoj3427:[POI2013]BAJ-Bytecomputer

    传送门 很显然有一个结论:最大不过1,最小不过-1 然后dp,设\(f[i][j]\)为满足前\(i\)个不下降,当前放的是\(j-2\),转移就比较好想了 具体方程看代码吧,终于有一个自己会写的题了 ...

  2. c# JsonReader读取json字符串

    使用JsonReader读Json字符串:      string jsonText = @"{""input"" : ""val ...

  3. with rollup

    实验吧的一道ctf题,这两天无聊,做做ctf题.在实验吧被一道也题卡了好久. 页面很简单就是一个登陆页面,按照之前的经验觉得应该是注入吧.再看题猜测应该是绕waf之类的. 查看页面源码找到了提供的源代 ...

  4. hdu4832Chess(dp)

    链接 这题第一想法是矩阵,不过范围太大了,然后就没有思路了.. 之后看到群里的解法,行和列可以分着走,两者是互不影响的,这样就把二维转换成了一维,直接dp求出就可以了. 然后再组合相乘一下. #inc ...

  5. JS中函数与事件

    一.函数: 1.函数就是一个工具,通过一小段代码,完成某个功能: 2.函数的定义: function 函数名(){ ..... } 或者 : var 函数名 = function(){ ...... ...

  6. Oracle查询排序asc/desc 多列 order by

    查询结果的排序 显示EMP表中不同的部门编号. 如果要在查询的同时排序显示结果,可以使用如下的语句: SELECT 字段列表 FROM 表名 WHERE 条件 ORDER BY 字段名1 [ASC|D ...

  7. DataPicker以及TimePicker显示时间和日期(屏幕上显示)

    public class MainActivity extends Activity { private DatePicker date_picker;private TimePicker time_ ...

  8. uvm_reg_field——寄存器模型(二)

    uvm_reg_field是最基本寄存器单元. typedef class uvm_reg_cbs; //----------------------------------------------- ...

  9. Mysql常用的优化技巧

    1.通过show status 命令了解各种sql的执行效率 2. 定位执行效率较低的SQL语句 开启慢查询记录: 打开Mysql配置文件my.ini ,找到 [mysqld] 在其下面添加 long ...

  10. HDOJ 4509 湫湫系列故事——减肥记II(2013腾讯编程马拉松) 并查集合并区间

    发现这种合并区间的题目还可以这么玩 给你n段时间 然后问没被占用的时间是多少 题目所给的区间是右开的导致我wa 好多人5e5*1440的暴力跑出来的时间居然只是我的两倍 不懂.... 所以并查集并没有 ...