图像边框 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: 平铺，当图片碰到边界时，会被截断

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

    eg:

border-image-repeat: stretch round;

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

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓