详解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实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 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
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP中的事务使用实例
2015/05/26 PHP
php获取远程文件内容的函数
2015/11/02 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python实现简单HTML表格解析的方法
2015/06/15 Python
Django的信号机制详解
2017/05/05 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
通过python3实现投票功能代码实例
2019/09/26 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
出纳岗位职责
2013/11/09 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
2015年教师节广播稿
2015/08/19 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python
MySQL优化之慢日志查询
2022/06/10 MySQL