详解CSS3中border-image的使用


Posted in HTML / CSS onJuly 18, 2015

最近在项目中用到了border-image,一直是只知其名,不知其用。

最终效果是这样的:且随着border宽度变化。下图灰色部分带斜纹的是border
详解CSS3中border-image的使用

先看下css:

CSS Code复制内容到剪贴板
  1. border-width40px;   
  2. border-stylesolid;   
  3. border-image-source: url('http://das.alipay.net/shulaibao/img/repeat_padding_bg_400px.png');   
  4. border-image-slice: 40;   
  5. border-image-repeatrepeat;   
  6. background#fff;   
  7. width800px;  

首先它必须是和border一起用,如果border为none,它也无效
实际是替换border-style,当border-image-source或border-image无效时,border-style就会有效了

和background一样,border-image也有简写的写法

简写的语法:

CSS Code复制内容到剪贴板
  1. border-image:<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>  

如上所示,包含了5个属性,详细分解如下:

图片地址: border-image-source,很好理解,要么有要么没有

CSS Code复制内容到剪贴板
  1. border-image-source:url('') || none  

图片切片: border-image-slice,不太好理解,是实现效果的精华,它把border-image-source切割成9部分,俗称九宫格,4个角,4个边框,1个中间区域
详解CSS3中border-image的使用

语法: 

CSS Code复制内容到剪贴板
  1. [<number> | <percentage>]{1,4} && fill?   

 

 border-image-slice: slice  /* One-value syntax   */  E.g. border-image-slice: 30%;
 border-image-slice: horizontal vertical    /* Two-value syntax   */  E.g. border-image-slice: 10% 30%;
 border-image-slice: top vertical bottom    /* Three-value syntax */  E.g. border-image-slice: 30 30% 45;
 border-image-slice: top right bottom left  /* Four-value syntax  */  E.g. border-image-slice: 7 12 14 5;
 border-image-slice: … fill /* The fill value can be placed between any value */ E.g. border-image-slice: 10% fill 7 12;
 border-image-slice: inherit
 值只能是写数值,百分比(相对图片的宽度或高度),而长度(px,em等)是不允许的且无效

图片宽度: border-image-width 代替border width
图片外凸: border-image-outset
图片重复: border-image-repeat,背景是否重复,默认值为stretch(拉伸)

HTML / CSS 相关文章推荐
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 HTML / CSS
纯CSS如何禁止用户复制网页的内容
Nov 01 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 #HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 #HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 #HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 #HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 #HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 #HTML / CSS
举例详解CSS3中的Transition
Jul 15 #HTML / CSS
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
PHP之短标签开启设置
2013/06/17 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
input按钮的事件处理大全
2010/12/10 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
Angular路由简单学习
2016/12/26 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
python实现汽车管理系统
2018/11/30 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python3实现弹弹球小游戏
2019/11/25 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
挂科检讨书范文
2014/02/20 职场文书
班级德育工作实施方案
2014/02/21 职场文书
超市活动计划书
2014/04/24 职场文书
组工干部对照检查材料
2014/08/25 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis