贴图 截图工具
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