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. 【模板】平衡树——Treap和Splay

    二叉搜索树($BST$):一棵带权二叉树,满足左子树的权值均小于根节点的权值,右子树的权值均大于根节点的权值.且左右子树也分别是二叉搜索树.(如下) $BST$的作用:维护一个有序数列,支持插入$x$ ...

  2. Python + request接口测试中Cookie和Session的获取和使用

    Cookie和Session的简单理解  由于Http协议是无状态的,所以产生了cookie和session进行状态的管理. 从哪里来,在哪里,到哪里去: --> Cookie是由服务端生成,存 ...

  3. 使用express+mongoDB搭建多人博客 学习(6)发表文章

    发表文章 1.在modules文件夹下新建post.js var mongodb=require("./db"); function Post(name,title,post){ ...

  4. 一图秒懂http与https的区别

    HTTPS与HTTP的一些区别 HTTPS协议需要到CA申请证书,一般免费证书很少,需要交费. HTTP协议运行在TCP之上,所有传输的内容都是明文,HTTPS运行在SSL/TLS之上,SSL/TLS ...

  5. substring和substr,slice和splice

    substring 和 substr 这二货都是针对字符串而言的,且都是返回一个副本,而不是在原字符串上直接操作. 上代码: var str = '0123456789'; console.log( ...

  6. JS中的回收机制

    js的设计者为了让没有必要的变量保存在内存中,(我们写的任何变量都是需要内存空间的),什么叫没有必要的变量?也就是说你不在需要这个变量的时候它就会被销毁?那么你肯定会问js怎么知道那些变量是我们不需要 ...

  7. while嵌套应用二:九九乘法表

    __author__ = 'zht' #!/usr/bin/env python # -*- coding: utf-8 -*- ''' #努力学习每一天 ''' #while嵌套应用二:九九乘法表 ...

  8. Eclipse-运行符-数据类型转换-环境变量配置

    1.能够使用Eclipse快捷键 ctrl + /   单行注释:再按一次则取消: ctrl + shift + /  多行注释:  ctrl + shift + \  取消多行注释: ctrl + ...

  9. IOS博客

    http://www.cnblogs.com/lovecode/articles/2249548.html从这个人这里了解了一些关于uiview和uilayer的区别 以及对于渲染和动画也有了一些了解 ...

  10. 面向阿里云专家的 Azure 云服务介绍

    本文是面向阿里云专家的 Azure 云服务介绍,参考本文可以帮助大家“按图索骥”在 Azure 的平台上找到能满足自己需求的服务. 在公有云计算蓬勃发展的同时,中国也出现了越来越多的本土公有云平台.针 ...