border-collapse 详解CSS3中border-image的使用(1/2)

本篇文章主要介绍了"border-collapse 详解CSS3中border-image的使用"，主要涉及到border-collapse方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 最近在项目中用到了border-image，一直是只知其名，不知其用。最终效果是这样的：且随着border宽度变化。下图灰色部分带斜纹的是border先看下cs...

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

最终效果是这样的：且随着border宽度变化。下图灰色部分带斜纹的是border

先看下css：

CSS Code复制内容到剪贴板

1. border-width: 40px;   
2. border-style: solid;   
3. border-image-source: url('http://das.alipay.net/shulaibao/img/repeat_padding_bg_400px.png');   
4. border-image-slice: 40;   
5. border-image-repeat: repeat;   
6. background: #fff;   
7. width: 800px;  

首先它必须是和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复制内容到剪贴板