给样式里的数字加上px后不显示效果？

为什么给样式里的数字加上px后不显示效果？给30加px，就没有边框里的图片了，去掉px，就好了

梓summer

2015-11-20

源自：十天精通CSS3 2-4

关注问题我要回答

856

操作

收起

3 回答

李晓健
2015-12-11

图片剪裁位置(border-image-slice)
此参数特点比较鲜明：
1、没有单位，专指像素。这类似于flash的as脚本，舞台高宽，影片剪辑大小，位移直接就是一个数值，没有单位，因为默认单位就是像素(px)了。例如：border-image:url(border.png) 27 repeat;这里的27专指27像素。

2、支持百分比值，百分比值大小事相对于边框图片而言，假设边框图片大小为400px*300px，则20%的实际效果就是剪裁了图片的60px 80px 60px 80px的四边大小。

0 回复有任何疑惑可以回复我~

#1

梓summer 提问者

非常感谢！

2015-12-11 回复有任何疑惑可以回复我~

XFE_星城前端_Peter
2015-11-20

码农，上代码说话，没代码……

0 回复有任何疑惑可以回复我~

#1

梓summer 提问者

<style> #border_image { margin:0 auto; height:100px; line-height:100px; text-align:center; font-size:30px; width:450px; border:15px solid #ccc; border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 30px round; } </style> <div id="border_image"> 请为我镶嵌上漂亮的画框吧 </div>

2015-12-11 回复有任何疑惑可以回复我~

李晓健
2015-11-20

给一下完整代码

0 回复有任何疑惑可以回复我~

#1

梓summer 提问者

<style> #border_image { margin:0 auto; height:100px; line-height:100px; text-align:center; font-size:30px; width:450px; border:15px solid #ccc; border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 30px round; } </style> <div id="border_image"> 请为我镶嵌上漂亮的画框吧 </div>

2015-12-11 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

十天精通CSS3

参与学习 243126 人
解答问题 2677 个

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

本课相似问答

2 回答为什么加了px之后没效果了？

6 回答加上px就没有办法显示边框图片

2 回答为什么0后面加上px就通不过

2 回答本地测试，参数不能加px 否则无效

1 回答给最后加了rotate后为什么前面skew设的扭曲效果不见了？

搜索更多本课相关问答

给样式里的数字加上px后不显示效果？

我要回答关注问题

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号