可视化大屏基础(一)------border-image的认识

贴图 截图工具

snipaste

标尺工具

mark man

主要用途

作用于盒子需要边框的时候

值	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

使用

1、border-image-source:url(图片路径)
2、border-image-slice ：50 37 20 127 4条线切割成9块

3、border-image-width：20px (可以有4个值)
border-image-width一般要与border-image-sclie和border-width一致
4、border-image-repeat：三个值

stretched效果

rounded效果

repeated效果

5、连写
border-image:地址 内偏移/图片边框宽度 图片填充效果
border-image:url() 167/20px stretch;

内减模型 :保证盒子的大小不变
box-sizing:border-box