详解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实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 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
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
学习ExtJS border布局
2009/10/08 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
js实现查询商品案例
2020/07/22 Javascript
进一步理解Python中的函数编程
2015/04/13 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Mac安装python3的方法步骤
2019/08/09 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
体育老师的教学自我评价分享
2013/11/19 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
高一作文之暖冬
2019/11/09 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
python字符串的多行输出的实例详解
2021/06/08 Python
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL