border-image-slice

border-image-slice

例如 border-image-slice: 20 30 40 50,图片向内偏移,显示的区域不同,请问一个图片怎么可能同时向四个方向移动(图片缩放了?)?如果只写一个数值,图片是向哪个方向偏移?是不是不给border-image-slice,边框图片只在四个角显示图片(九宫格切法)?所以运用的时候必须设置border-image-slice,border-image-width可有可无,大部分时候只需要border-image-slice来设置宽度即可(实现除中间外的四条边都显示图片的效果)?

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好, 还是上一条回答中图片为例,图片的大小为81px*81px。 举两个例子对比一下帮助同学理解

  1. border-image-slice值设置的与图片大小一致, 相当于没有切割图片,那么此时图片就是在四个角完整显示的

    http://img1.sycdn.imooc.com//climg/5dcd307b0927588a08950722.jpg

  2. 调整border-image-slice的值,查看实现的效果图,自己对比理解一下即可

    http://img1.sycdn.imooc.com//climg/5dcd30e7090b1a9c14120435.jpg

    http://img1.sycdn.imooc.com//climg/5dcd310f09949fba12050420.jpghttp://img1.sycdn.imooc.com//climg/5dcd31650928892e14010391.jpg


border-image相关的知识,在实际开发中几乎不会使用到。同学不用深入的学习,简单了解一下即可

如果帮助到了你, 欢迎采纳,祝学习愉快~~~

好帮手慕慕子 2019-11-14 15:09:31

同学你好,对于你的问题解答如下

  1. 因为border-image-slice属性具有裁剪特性,例如你这里说的, border-image-slice: 20 30 40 50, 表示距离图片上部20的地方,距离右边30,距离底部40,左边50的地方各剪裁一下, 实现的效果就是图片四个方向都发了缩放效果

    示例: 使用图片正常打开如下所示

    http://img1.sycdn.imooc.com//climg/5dccfcc909e4376601760127.jpg

    测试代码及效果:

    http://img1.sycdn.imooc.com//climg/5dccfcf509850fe009790595.jpg

  2. 如果只设置了一个数值,表示四个方向在同样的位置进行裁剪进行缩放

    http://img1.sycdn.imooc.com//climg/5dccfd5e099f567c09500485.jpg

  3. 是的,如果设置border-image-slice, 边框图片只会在四个角显示

    http://img1.sycdn.imooc.com//climg/5dccfc1c098dc11810660524.jpg

  4. 必须设置border-image-slice,border-image-width可以不设置。只是在不设置border-image-width的时候,它的值默认等于border-width的值

border-image相关的知识,在实际开发中几乎不会使用到。同学不用深入的学习,简单了解即可

如果帮助到了你, 欢迎采纳,祝学习愉快~~·

  • 提问者 迷失的小麦 #1
    我看不懂是怎么裁剪的
    2019-11-14 15:39:59
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师