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- ...
随机推荐
- 超简单 Promise封装小程序ajax 超好用 以及封装登录
//网络类 //封装网络请求 const ajax = (ajaxData, method) => { wx.showLoading({ title: '加载中', mask: true }); ...
- Web之localStorage
localStorage: 1.localStorage拓展了cookie的4K限制 2.localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库 ...
- Codeforces Round #396 (Div. 2) C
Mahmoud wrote a message s of length n. He wants to send it as a birthday present to his friend Moaz ...
- 求N之下的所有素数
No.1 f=lambda n: [x for x in range(1,n) if not [y for y in range(2,x) if x%y ==0 ]] No.2 def prime(n ...
- Unity EditorWindow知识记录
1.创建EditorWindow using UnityEditor; using UnityEngine; public class ZZEditorWindow : EditorWindow { ...
- Java微信公众平台开发(九)--微信自定义菜单的创建实现
自定义菜单这个功能在我们普通的编辑模式下是可以直接在后台编辑的,但是一旦我们进入开发模式之后我们的自定义菜单就需要自己用代码实现,所以对于刚开始接触的人来说可能存在一定的疑惑,这里我说下平时我们在开发 ...
- ItemsControl Grouping分组
ItemsControl属性GroupStyle Grouping再ItemsControl源代码 public class ItemsControl : Control, IAddChild, IG ...
- 用Excel生成Sql
用Excel生成Sql: 以如图为例:点击一行数据的后面一个单元格,在上面的fx部分输入=,以等号开头证明这是一个公式.在等号的后面写上想要添加的数据,书写规范是这样:'"&A2&a ...
- 洛谷 P1902 刺杀大使
刺杀大使 一道并不难的二分题,竟让我交了上20次,诶,果然还是我太弱了. 看完题目就基本想到要怎么做了: 只需要对最小伤害代价进行二分即可,check()函数里用搜索判断是否可以到达最后一行,这里的c ...
- cf1028C. Rectangles(前缀和)
题意 给出$n$个矩形,找出一个点,使得至少在$n$个矩阵内 Sol 呵呵哒,昨天cf半夜场,一道全场切的题,我没做出来..不想找什么理由,不会做就是不会做.. 一个很显然的性质,如果存在一个点 / ...