图像边框 border-image的语法属性介绍以及使用

1. 图像边框路径border-image-source: url(图片路径);2. 图片边框裁剪位置border-image-slice: 数值; 注: 只写数值不加单位专指像素border-image-slice: 27 fill; 默认情况下中间部分不显示，如果需要显示添加 fill 属性3. 图像边框平铺属性border-image-repeat: stretch | repeat | round; stretch: 默认值，拉伸 repeat 0 Comments


1. 图像边框路径

border-image-source: url(图片路径);


2. 图片边框裁剪位置

border-image-slice: 数值;

注: 只写数值不加单位专指像素

border-image-slice: 27 fill;

默认情况下中间部分不显示，如果需要显示添加 fill 属性


3. 图像边框平铺属性

border-image-repeat: stretch | repeat | round;

stretch: 默认值，拉伸

repeat: 平铺，当图片碰到边界时，会被截断

round: 铺满，当图片遇到边界时，会调整图片的大小

eg:

border-image-repeat: stretch round;

水平方向拉伸，垂直方向铺满


本文链接：https://my.lmcjl.com/post/20917.html

展开阅读全文

相关文章

4 评论

留下您的评论.