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- ...
随机推荐
- AOP 应用
AOP 的核心:解耦 1. 权限认证2. 事务3. 日志4. Lazy loading 懒加载5. Context Process 上下文处理6. Error Handler 错误追踪(异常捕获)7. ...
- github 收藏项目的方法
1,Watching 需要收藏的项目 2,查看收藏的项目
- JQ Ajax 同步与异步的区别
$.ajax({ url: xml_addr, type: 'get', dataType: 'xml', timeout: 1000, //设定超时 cache: false, //禁用缓存 asy ...
- flask_context
定义全局的钩子函数 有的时候在处理请求之前和之后,执行某些特定的代码是很有用的,这就用到了请求钩子 例如在请求之前创建数据库连接或者redis连接:或者是系统里面用户请求处理之前先验证用户的身份,是否 ...
- UWP 基本控件
-------持续更新 updated 2017.11.8---------------------- 一:TextBlock 文本显示框 1. IsTextSelectionEnabled属性 值 ...
- UVa-11582:Colossal Fibonacci Numbers!(模算术)
这是个开心的题目,因为既可以自己翻译,代码又好写ヾ(๑╹◡╹)ノ" The i’th Fibonacci number f(i) is recursively defined in the f ...
- 命令行媒体处理工具 FFmpeg
FFmpeg 是一套在命令行界面运行的跨平台媒体处理工具,属于自由软件,常用来对视频音频和图片等媒体文件进行格式转换.分割和合并等,也可录屏录音. 开发语言:C官网:https://www.ffmpe ...
- 轻松把玩HttpClient之配置ssl,采用绕过证书验证实现https
上篇文章说道httpclient不能直接访问https的资源,这次就来模拟一下环境,然后配置https测试一下.在前面的文章中,分享了一篇自己生成并在tomcat中配置ssl的文章<Tomcat ...
- Solr的SolrCloud与Master-slave主从模式对比
第一印象 SolrCloud是Solr4.0引入的,主要应对与商业场景.它很像master-slave,却能自动化的完成以前需要手动完成的操作.利用ZooKeeper这个工具去监控整个Solr集群,以 ...
- html5拖动滑块
html5中input有增加type=range.这为拖动滑块提供了很大的便利.下面是他的属性: <!DOCTYPE html> <html lang="en"& ...