详解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垂直手风琴菜单
Jun 28 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP开发中常用的8个小技巧
2008/08/27 PHP
php2html php生成静态页函数
2008/12/08 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
使用preload预加载页面资源时注意事项
2020/02/03 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
python实现目录树生成示例
2014/03/28 Python
Python中title()方法的使用简介
2015/05/20 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
linux面试相关问题
2012/08/11 面试题
《母鸡》教学反思
2014/02/25 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
2014年市场部工作总结
2014/11/25 职场文书
贷款收入证明格式
2015/06/24 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
初中物理教学反思
2016/02/19 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
python 学习GCN图卷积神经网络
2022/05/11 Python