详解css3之border-image

jackzou 发布于2019-08-21 10:46 / 1997人阅读

摘要：属性用来指定边框所需素材的路径，语法可以参照。当图片碰到边界时，如果超过则被截断。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。如下图后续是属性所以存在兼容性问题，需要在属性前面设置等

border-image简介

css3中新增了一个属性border-image，这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。
border-image 是一个简写属性，分别设定了以下几个属性。

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

为什么图片可以作为边框？

在开始学习border-image之前我有一个疑问，图片是怎么应用到容器的边框上的？

看下图

简单的说就是把图片的中间部分去掉，从而形成一个类似边框的框架。

那么如何使用被划分出来的八格素材来生成一个边框呢？

左上、右上、左下、右下的四格素材分别作为边框的四个角，而上下左右的四格素材分别经过不同形式的扩展，形成边框的四条边。上图很好的说明了图片形成边框的处理形式。

border-image-source

border-image-source属性用来指定边框所需素材的路径，语法可以参照backgound-image。
需要注意的是，如果只设置了border-image-source属性而其他属性使用缺省值，则边框素材不会被划分九宫格，而是将整个素材按照边框宽度缩放至合适尺寸后安放在边框四角。





边框图片

如下图

border-image-slice

border-image-slice属性用来设置边框素材的切割尺寸，如下图，依次是上横切割线，右竖切割线，下横切割线，左竖切割线。数值分别代表从上、右、下、左边缘向素材中心延伸的像素/百分比数
注意：切割的数值只接受像素和百分比两个单位，并且像素单位必须省略，即只接收数值或者百分比的形式。例如，border-image-slice: 10 10 30 10代表图片素材按照下图的样式被切割：

border-image-width

border-image-width用来设置边框素材的宽度,当同时设置了border-image-width和border-width属性时，那么边框的实际宽度由border-width属性决定。此时，如果border-image-width属性小于border-width属性，边框图片会沿边框的外侧分布而内侧留空形成 padding 的效果；如果border-image-width属性大于border-width属性，边框图片会仍会沿边框的外侧分布而内测溢出，如下图

border-image-repeat

border-image-repeat属性用来设置上下左右四边(即2、4、5、7四个素材块)的重复形式，分别有stretch repeat round space四个取值

stretch:指定用拉伸方式来填充边框背景图。

repeat:指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。

round:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

space:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。

border-image-outset

border-image-outset属性会产生使 border-image 相对于原始位置向外侧推移的效果，设置border-image-outset属性会使 border-image 溢出，但不会影响整个盒模型的尺寸，因此在设置此属性时要特别注意防止元素间的相互干扰。

如下图

后续

border-image是css3属性所以存在兼容性问题，需要在属性前面设置-webkit等

服务器托管 idc机房托管 border-image css3 css3气泡 css3动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86161.html

CSS3 新特性

摘要：语法说明对象选择器投影方式轴偏移量轴偏移量模糊半径阴影扩展半径阴影颜色内阴影，向右偏移，向下偏移，模糊半径，阴影缩小属性的参数设置取值阴影类型此参数可选。 CSS3 是最新的 CSS 标准，并且完全向后兼容，不过目前W3C 仍然在对 CSS3 规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 评论0 收藏0
CSS渐变之背景、边框、字体渐变

摘要：使用实现背景色渐变边框渐变，字体渐变的效果。定义渐变的颜色，可以使用百分比指定渐变长度。比如则变成了酱子背景色渐变非常简单，但上面的代码中，是加在属性上的。被切割的个部分分布在边框的个区域。使用CSS实现背景色渐变、边框渐变，字体渐变的效果。背景色渐变 .bg-block { background: linear-gradient(to bottom, #F80, #2ED);...

wapeyang 2019-08-29 14:13 评论0 收藏0
CSS魔法堂：重拾Border之——图片作边框

摘要：一铺搞定一铺清袋粤语的一铺搞定其实就是一次完成全部工作的意思，上面关于的属性，要是每次都逐个设置那要敲多少次键盘啊。。。语法粤语的一铺清袋其实就是把之前的成果一次性归零。前言当CSS3推出border-radius属性时我们是那么欣喜若狂啊，一想到终于不用再添加额外元素来模拟圆角了，但发现border-radius还分水平半径和垂直半径，然后又发现border-top-left/...

linkFly 2019-08-30 12:59 评论0 收藏0
CSS3 border-image 彻底明白

摘要：用于给边框贴上背景图像类似于中的背景属性。重复性取值为重复只是其中之一，其余两个是平铺和拉伸。其中，是默认值。例如表示水平方向平铺，垂直方向重复。不进行拉伸，不凑整。效果如下白框为部分资料来源网络亲们，看懂没不懂请留言，帮你解答。。 border-image用于给border（边框）贴上背景图像类似于CSS中的background（背景）属性。例如：background:url...

chenjiang3 2019-08-20 19:07 评论0 收藏0
CSS3 border-image 彻底明白

摘要：用于给边框贴上背景图像类似于中的背景属性。重复性取值为重复只是其中之一，其余两个是平铺和拉伸。其中，是默认值。例如表示水平方向平铺，垂直方向重复。不进行拉伸，不凑整。效果如下白框为部分资料来源网络亲们，看懂没不懂请留言，帮你解答。。 border-image用于给border（边框）贴上背景图像类似于CSS中的background（背景）属性。例如：background:url...

songjz 2019-08-29 13:19 评论0 收藏0