首页猿问 border-image：url（...

border-image：url（）后的30 repat是什么意思

CSS3

慕粉18256992339 2016-09-16 20:43:11

这里的30是什么意思，望指点

查看完整描述

2 回答

stone310

TA贡献361条经验获得超191个赞

这个数字就是裁剪值，完整的写是：border-image：url（） 30 30 30 30 repeat;

这4个数字分别对应top,right,bottom,left，用张图好理解

//img1.sycdn.imooc.com//57dbfe6e0001a81202430145.jpg

假设这张图的每个菱形大小都是30*30的，那么数值30的裁剪线就如图；

其中四个边角位置（红色菱形）的形状不发生改变，蓝色的则按照repeat/ stretch/round进行处理

1 反对回复 2016-09-16

OlderSkee

TA贡献123条经验获得超103个赞

repeat 单词是重复的意思，那么设置

no-repeat 不重复

repeat-x 在横向重复平铺

repeat-y在纵向重复平铺

repeat 在横向和纵向都平铺

反对回复 2016-09-17

关注

0/150

提交

取消