专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

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

作者:鹏仔先生日期:2020-06-02浏览:1087分类:CSS


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;

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


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯