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. native-echarts 在安卓上无法显示出来

    1.native-echarts 的配置是百度echarts 2.模拟器上试了很多次都显示不出来(具体不清楚,我的是这样) 3.真机测试可以显示图表,以下是配置: a.将node_modules\na ...

  2. Poj2299 Ultra-QuickSort(另附本质不同逆序对)

    Description 给定一个长度为 n(n≤5*10^5) 的序列 a,如果只允许进行比较和交换相邻两个数的操作求至少需要多少次交换才能把 a 从小到大排序. Input The input co ...

  3. niushop,优秀的国产开源电商系统体验

    前几天,小编发布了国产电商开源系统推荐,有个小伙伴后台留言说niushop不错. 先别管这么多,盘他! 我这里下载的是B2C单商户免费版 先把源码下载下来.安装之前先看看niushop的环境要求. P ...

  4. C# 基础之字段与属性

    1.属性是字段的扩展 2.根据面向对象封装思想,字段最好设为private(私有),这样有利于防止客户端对字段的篡改,从而保证了成员的完整性 3.访问类中私有字段,C#提供了属性,用来对字段进行灵活的 ...

  5. 调试PHP

    echo "<br/>"; print_r($array);

  6. 详细说明phpmyadmin连接,管理多个mysql服务器

    用phpmyadimn来连接管理多个数据库要修改配置文件,挺不爽的,并且连接远程数据库,速度不行.可以使用其他数据库管理工具,请参考,navicat 结合快捷键 非常好用,开源,好用mysql 管理工 ...

  7. ActiveMQ与RocketMQ对比

      ActiveMQ RabbitMQ RocketMq ZeroMQ 关注度   高 高 中 中 成熟度   成熟 成熟 比较成熟 不成熟 所属社区/公司 Apache  MozillaPublic ...

  8. MVC 下载相关

    前台: location.href = "/Flow/SB1SP?clxxid=8099b23c-aa5a-44a3-97ef-85eed78145ba"; 后台: publci ...

  9. 前端生成全球唯一码GUID

    function GUID() { this.date = new Date();  //先new一个时间备用 GUID.prototype.newGUID = function () { this. ...

  10. 基于Java实现的插入排序算法

    简述 插入排序(Insertion-Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常 ...