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. JavaScript 原生提供两个 Base64 相关的方法

    JavaScript 原生提供两个 Base64 相关的方法. btoa():任意值转为 Base64 编码 atob():Base64 编码转为原来的值 var string = 'Hello Wo ...

  2. 解决web项目无法部署到eclipse配置的本地tomcat

    一.发现问题 在eclipse中新建Dynamic Web Project,配置好本地的tomcat并写好代码后选择Run on Server,但运行后发现在tomcat的安装目录下的webapps并 ...

  3. sQL存储过程的优缺点

    目前具体的项目中没有使用sql存储过程,都用的封装好的框架,简单说下存储过程的优缺点. 优点: 1.存储过程只在创造时进行编译,以后每次执行存储过程都不需再重新编译,而一般 SQL 语句每执行一次就编 ...

  4. clearfix的运行机制和进化

    话说为什么要把这个记下来,因为昨天去面试,问了clearfix的原理,当时脑子不清晰,回答得真是想要咬舌自尽.遂,决定,要搞清楚来龙去脉~~~(资料来自网上博主们,)http://www.aseoe. ...

  5. cmder安装

    官网地址:http://gooseberrycreative.com/cmder/ 一款非常漂亮好用的cmd工具. 在github或者官网下载后解压,点击Cmder.exe即可启动. 32位系统会遇到 ...

  6. vuex 使用方法

    1.安装vuex扩展 : npm install vuex 2.在componets目录下新建 store.js 文件 import Vue from 'vue' import Vuex from ' ...

  7. vue-quill-editor 富文本编辑器插件介绍

    Iblog项目中博文的文本编辑器采用了vue-quill-editor插件,本文将简单介绍其使用方法. 引入配置 安装模块 npm install vue-quill-editor --save in ...

  8. PostgreSQL函数如何返回数据集 [转]

    PostgreSQL函数如何返回数据集 以下主要介绍PostgreSQL函数/存储过程返回数据集,或者也叫结果集的示例. 背景: PostgreSQL里面没有存储过程,只有函数,其他数据库里的这两个对 ...

  9. 洛谷 P2353 背单词

    题目背景 小明对英语一窍不通,令老师十分头疼.于是期末考试前夕,小明被逼着开始背单词…… 题目描述 老师给了小明一篇长度为N的英语文章,然后让小明背M个单词.为了确保小明不会在背单词时睡着,老师会向他 ...

  10. The Singapore NRIC Check Digit

    The Singapore NRIC number is made up of 7 digits and a letter behind. This letter is calculated from ...