介绍/*,只有一个值的时候它控制所有的边,*/border-image-slice: 30%,,/*,有俩个值的的时候它分别控制垂直方向,|,水平方向,*/border-image-slice: 10%, 30%;/*,有三个值的时候它分别控制,顶部,|,水平方向,|,底部,*/border-image-slice: 30, 30%, 45;/*,四个值那就是对应,上,右,下,左*/border-image-slice: 7, 12, 14, 5,,/*,使用填充(填充可以放在任意位置)那就开启了第九个九宫格,*/border-image-slice: 10%, fill 7, 12;/*,Global values */border-image-slice:继承;
border-image-slice:初始;
border-image-slice:设置;
这篇文章将为大家详细讲解有关CSS3中border-image-slice属性有什么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
首先我们来了解一下它是干嘛的。
说明:
文档说明:它是控制图像边界向内偏移的。
什么? ? ?这是嘛意思啊?根本看不懂! ! !好的,我们先不要急,我们在看看:
基础知识:
当我们通过border-image-source引用边框图片后,<强> border-image-slice 属性会将图片分割为9个区域:四个角,四个边(边缘)以及中心区域。四条切片线,从它们各自的侧面设置给定距离,控制区域的大小。
参数:
具体使用:
我们先从最开始的百分之百开始看效果:
CSS3中border-image-slice属性有什么用
