[CSS揭秘]连续的图像边框

背景知识：border-image, gradient,  多重背景，CSS动画

背景知识讲解

1. border-image

边框应用背景图片，图片会自动被分割为四等分，分别用于四个边框。使用border-image属性时，会替换掉border-style属性设置的边框样式。如果boder-image-source为none或者图片不能显示时，会应用border-style属性。

语法

boder-image: border-image-source  border-image-slice  border-image-width  border-image-outset  border-image-repeat

初始值

border-image: none 100% 1 0s stretch

没有继承性

 

border-image-width 定义图像边框宽度

如果border-image-width大于指定的border-width,那么会向内部扩展

取值: 百分比  像素  number(border-width倍数)  auto

all  /  vertical horizontal  /  top horizontal  bottom  / top right bottom left

 

background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 0 / 80px 80px;

 

My border is reminiscent of vintage envelopes, how cool is that?

 

background使用渐变色实现多重背景

border-image也能达到同样效果，但是使用过程中有些注意事项：

1. border-image-slice改变时，还需要改变border-width

2. border-image-slice边框厚度指定为像素单位，不支持em单位

3. border-image-slice改变时，如果使用的是渐变色，可能需要修改色标的位置信息

 

蚂蚁行军边框

 

 

可以自定义各种特殊样式的虚线框: 虚线线段的颜色，长度及间隙。

 

脚注

 

1. This is a footnote.