详解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 23 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 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中几种常见的超时处理全面总结
2012/09/11 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP比你想象的好得多
2014/11/27 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python实现动态数组的示例代码
2019/07/15 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
Python文件操作方法详解
2020/02/09 Python
Python实现分数序列求和
2020/02/25 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
个人简历自我鉴定
2013/10/11 职场文书
子女赡养老人协议书
2016/03/23 职场文书
创业计划书之校园超市
2019/09/12 职场文书
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android