CSS3的border-image
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的更多相关文章
- css3学习--border
http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...
- css3实现border渐变色
案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient ...
- css3 做border = 0.5px的细线
参考: https://blog.csdn.net/Tyro_java/article/details/52013531
- CSS3 用border写 空心三角箭头 (两种写法)
之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...
- css3动画使用技巧之—border旋转时的应用。
<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...
- css3图形绘制
以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(bo ...
- css3之图形绘制
由于近期的项目中出现了不规则的边框和图形, 所以重新温习一下CSS3的图形绘制...样式绘制的图形比图片的性能要好,体验更佳,关键一点是更加有趣! 以下几个例子主要是运用了css3中border.bo ...
- 总结html
1.初识html W3C : 万维网联盟!(World Wide Web Consortium ) 创建于1994年,是web技术领域最权威最具有影响力的标准机构! W3C规定 ...
- 你务必知道的css简写
欢迎加入前端交流群来py:749539640 简写属性是可以让你同时设置其他几个 CSS 属性值的 CSS 属性.使用简写属性,Web 开发人员可以编写更简洁.更具可读性的样式表,节省时间和精力. ...
- CSS3 笔记一(Rounded Corners/Border Images/Backgrounds)
CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...
随机推荐
- Tyvj1474 打鼹鼠
Description 在这个“打鼹鼠”的游戏中,鼹鼠会不时地从洞中钻出来,不过不会从洞口钻进去(鼹鼠真胆大……).洞口都在一个大小为n(n<=1024)的正方形中.这个正方形在一个平面直角坐标 ...
- linux常用命令(ubuntu)
编辑: vi [path] vim [path] :q 退出 :wq 保存退出 查看进程 ps ps -aux | grep mem 查看全部含 “mem”的进程 ps –aux 查看全部 在系统启 ...
- php 分析2
a:link,a:visited,a:hover,a:active 1:解释 link:连接平常的状态 visited:连接被访问过之后 hover:鼠标放到连接上的时候 active:连接被按下 ...
- c/c++学习系列之取整函数,数据宽度与对齐
浮点数的取整 C/C++取整函数ceil(),floor() double floor(double x); double ceil(double x); 使用floor函数.floor(x)返回的是 ...
- 二叉查找树之AVL树
定义平衡树节点: class TreeNode { /** * 树节点的值 */ private int val; /** * 树的高度 */ private int height; /** * 左子 ...
- Spring之WebContext不使用web.xml启动 初始化重要的类源码分析(Servlet3.0以上的)
入口: org.springframework.web.SpringServletContainerInitializer implements ServletContainerInitializer ...
- [转]Formatting the detail section to display multiple columns (水晶报表 rpt 一页多列)
本文转自:http://www.bofocus.com/formatting-the-detail-section-to-display-multiple-columns/ Format the de ...
- 创建对象js.
JavaScript中的基本书记类型. Number(数值类型) String(字符串类型) boolean(布尔类型) null(空类型) undefined(未定义类型) object 常见的内置 ...
- printf 遇到bash重定向
在printf之前添加:setvbuf(stdout,NULL,_IONBF,0);设置缓冲区为空. 在每句printf之后添加:fflush(stdout); 方法一: 1 2 3 4 5 6 7 ...
- Does Little'law really applicable to apply performance model now?
上次提到Little定律, 我也解释过它跟另外一个公式有一些内在的关系,但是其实我自己对LL在当前复杂架构系统中到底是怎么应用的也没有完整的想法,于是我在Linkedin上把这个问题抛了出来,没有想到 ...