>
导航首页 » 技术教程

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

2024/11/05 19:53:44    懒猫导航网    已浏览6次

  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:

  点击复制代码CSS

border-image-repeat:stretch round;

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