一、浏览器对它的支持
Firefox3.5-Firefox15     需要加-moz-前缀
Firefox15以上              同样支持-moz-前缀的css代码,但是必须在css代码中加入border-style:solid;否则不会看到效果。
Chrome1.1.x以上         需要加前缀-webkit-
Safari3.1以上               需要加前缀-webkit-
Opera浏览器               需要加前缀-o-
较新版本的Chrome,Firefox及Webkit内核的opera   支持w3标准,可以不加前缀。
IE浏览器                     支持效果不好,IE11可以支持。

二、border-image的参数
border-image-source:url('')  图片的路径
border-image-slice     图片的裁切方式,4个参数可以是像素值,也可以是百分比。顺序为上,右,下,左。
border-image-width   边框的宽度, 顺序为上,右,下,左。
border-image-outset  边框偏移基准位置的像素值,默认为0,
border-image-repeat  裁切后图片的填充方式,可选stretch/repeat/round,分别为拉伸,重复,平铺,默认值为stretch,顺序为:上下,左右。

三、对参数进行解析
border-image-slice     图片的裁切方式,4个参数可以是像素值,也可以是百分比。顺序为上,右,下,左。
border-image-slice:33% 33% 33% 33%或则border-image-slice:33%。
把一张图片进行切割,按照上面的百分比来切割。通过上面的四个百分比可以把一张图片切割成9部分,然后把其中外部的八部分按照填充方式进行填充到边框上的相应位置。如果边框有一定的宽度,那么四条边和与之包含的内容的组合也是一个九宫格。

border-image-outset:50px
表示图片填充的外部边缘距离元素边框为50px.如果边框的宽度小于border-image-outset的值,那么元素与图像填充之间会有(border-image-outset的值减去边框宽度)大的间隙。

border-image-repeat:把图片按照上面裁切的方式裁切之后,每部分的小图片就要按照对应的边框区域填充。在填充时,图片的四个角的图片不会改变。其余的图片会随着
border-image-repeat设定的填充方式来改变。

border-image属性把边框的背景设置为图片的更多相关文章

  1. CSS3入门之边框与背景

    CSS3入门之边框与背景 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !im ...

  2. 【CSS】使用边框和背景

    1. 应用边框样式 先从控制边框样式的属性开始.简单边框有三个关键属性:border-width.border-style 和 border-color . <!DOCTYPE html> ...

  3. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  4. CSS的背景属性和边框属性

    CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-co ...

  5. 复习-css边框和背景属性

    css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...

  6. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  7. 使用CSS设置边框和背景

    一.设置边框 1.边框样式 属性 说明 border-width 设置边框的宽度 boder-style 设置边框的样式 border-color 设置边框的颜色 a.border-width属性 自 ...

  8. 27.给input边框和背景颜色设置全透明

    给input边框和背景颜色设置全透明,但是里面的字不会消失 1.让背景颜色变透明(二选一) background-color:rgba(0,0,0,0); background:rgba(0,0,0, ...

  9. 7.css3表格、列表、边框的样式设置--list/border

    1.css表格: ①Border-collapse是否把表格边框合并为单一的边框.Separate默认值,collapse合并. ②Border-spacing分割单元格边框的距离. ③Caption ...

随机推荐

  1. VMware Workstation 虚拟机使用无线wifi上网配置

    VMware Workstation 虚拟机使用无线wifi上网配置 参考文档: 转载/VMware Workstation环境下的Linux网络设置/适用于无线网络 VMware Workstati ...

  2. git服务搭建以及本地连接

    服务器系统:centos6.5 本地系统:Mac 10.11 注意事项:本地git和服务器版本最好一样,centos上面的yum install git版本是1.7的,需要手动在下载,并手动编译 下载 ...

  3. C#中get和set属性的作用

    c#在定义类时,通常要把类中声明的对象封装起来,使得外界不能访问这个属性.上述代码中如果去掉set部分,则外界只能读取name的值,如果去掉get部分,则只能给name赋值.这样就可以控制外界对私有属 ...

  4. 28. 实现strStr()

    实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返 ...

  5. vb.net WIN32API 获取listview的值

    Public Class Form1 Public Const LVM_FIRST As Short = &H1000S Public Const LVM_GETITEMCOUNT As In ...

  6. PAT DFS,BFS,Dijkstra 题号

    为什么要分类刷题: 因为刷⼀道算法题需要花⼀两个⼩时甚⾄半天,平时我们还要上课做别的事情,你在⼀段时间内刷算法如果只按照顺序,可能今天遇到了⼀道最短路径的题⽬,弄了半天好不容易看懂了别⼈的代码,以为⾃ ...

  7. 20155205 郝博雅 Exp2 后门原理与实践

    20155205 郝博雅 Exp2 后门原理与实践 一.基础问题回答 后门(木马) 专用程序 投放 隐藏(免杀) 启动(自启动.绑定) (1)例举你能想到的一个后门进入到你系统中的可能方式? 答:上学 ...

  8. spring bean 注入

    概念 http://developer.51cto.com/art/200610/33311.htm http://kb.cnblogs.com/page/45266/ ==https://www.c ...

  9. 关于QList<T>的内存释放

    当T为指针类型时,List.clear()不能释放其内存,需加上qDeleteAll()函数, //class Person ---> Person(int id_,QString name_) ...

  10. python基础自学 第一天

    python的概述 python的创始人:吉多·范罗苏姆 1991年,第一个python解释器诞生,用C语言实现,并能调用C语音的库文件 解释器(解释型语言和编 译型语言的区别) 把其他语言翻译成计算 ...