css3系列之详解border-image

border-image

border-image呢是给 边框加上背景图片的。没错就是平常那一小小条的边框,也能加图片。

参数

  border-image-source

  border-image背景图片我依然爱你-slice

  border-image系统运维工程师-wid系统运维工作内容th

  border-image-outset

  border-image-repeat

  border-image-source:linux重启命令 url()

设置边框图片的路径

  border-image-slice: 100 100 100 100 fill

用以linux指定从哪 4 个位置分割图像(遵循上右下左的顺序)。

参数可以填 5个, 前1~4 个参数 是按照线的linux位置分割,按照 上 右 下 左的顺序分割, 值的设置跟其他值的缩写方式一样, 提供 2个 值 就是 上下 和 左右, 提供1个值 就设置4条线的位置。 注意 只能填数字, 百分linux必学的60个命令比, 不能加上px。 100 就等于 100px

那么到底是怎么分割linux法的呢,看下面的图片详解,看起来可能有点乱, 认真看,还是看得懂的呢。 蓝色数字 9 ,是内容区。 如果不填上第五个参数 fill, 是会空白的。


                                            css3系列之详解border-image


                                            css3系列之详解border-image

  border-image-width: 1

设置边框图片的宽度。 可以设置 数字, 和 px, 数字的话是几倍的意计算机等级考试思。 1的话, 就是 1 * bor系统运维工程师der-width系统运维包括哪些内容, 也可以设计算机等级考试置auto。 auto的计算方式是,取 border-image-linuxslice 的值,然后加上背景图片大全唯美带字 px 如果border-image-背景图片带字霸气slice 的值为 100, 那么取过来, 加上 px 就是 100px。


                                            css3系列之详解border-image

  border-image系统运维工程师-outset: 100px 100px 100px 100px

在原来的基础上, 上 右 下 左 扩大100px , 可以简写。 也可以设置数字, 数字也一样。是几倍的意思。 1 代表 1倍 也就是 1* border-width(100)系统运维工资一般多少 = 100px

  border-imag系统运维工程师e-repeat:

参数:stretch  repeat  round 系统运维工作内容 space

按照什么方式来背景图片全屏 平铺。 可以填 两个参数, 一个参数, 代表 四个系统运维包括哪些内容方向的平铺一样。 两个参数,第一个值 代表 水平方向,第二个值代表 垂直方向。

网上截图,截的不好, 所以有中间那个小红点,忽略它就好。 这个方法,兼容情况不是很好,一般没有特殊情计算机科学技术专业况,不会去设置它的。

  最后,简写方式:

只能填,三个参数。 slice 和re背景图片我依然爱你peat 是可以填多个值的。

border-image: url(./img/Snipaste_2019-07-16_16-39-16.png) 100 space;
/* 简写: 三个参数  source  slice  repeat */