• 欢迎大家分享资料!前往留言板评论即可!

web端的“点九”图

合宙 模组资料网 1年前 (2021-05-15) 262次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

首先,什么是点九图?

最常见的应用:聊天气泡
如果我们发送的信息很少,气泡是这个样子的web端的“点九”图
而如果发送的信息较多是,气泡就会变大web端的“点九”图
这里有个细节,就是不管你的绿色方块有多大,小尾巴的大小和距离上方的位置是不变的,如果直接png图片拉伸,小尾巴一定会随之失真,四周的圆角也会失真(敲黑板)这时候点九图就派上用场了。
web端的“点九”图
以上是我用ps随便画的一个九宫格图,想象一下,3号的位置就是小尾巴的位置,那我们要做的就是在内容5不断扩大的时候,保持1379不变,28横向拉伸,46纵向拉伸,这样就可以完成需求了。

实际操作

设计师给了需求之后,我查了半天终于明白了是怎么回事,正要感谢伟大的设计者搞出这么人性化设计,然鹅!
点九图只能在Android端使用!
难道我就此向命运屈服了吗?当然不行!
感谢伟大的度娘,感谢伟大的css3,还真让我找到的类似的方法。

css3里有一个border-image 属性,主要用于定义边框的样式,具体参数如下:
web端的“点九”图
参数可以合并写也可以分开写,我合并起来写几个例子。
首先,定义一个宽高为600px的盒子,以下例子将省略重复代码

<div class="nine"></div>
div {
            width: 600px;
            height: 600px;
        }

1.边框拉伸,内容空白

web端的“点九”图

 .nine {
            border: 30px solid transparent;
            border-image: url(./未标题-1.jpg) 62 62 stretch;
        }

2.边框铺满,内容填满

web端的“点九”图

 .nine {
            border: 15px solid transparent;//改变边框的宽度
            border-image: url(./未标题-1.jpg) 62 62 fill round;
        }

注:图片是200*200的,62只是一个估计的px数,所以可能会有毛边(如图一),真实情况下,精准的数据不会造成这种情况。

总结

以上2个例子基本可以涵盖大部分可能出现的情况,灵活使用 fill/round/stretch参数可以达到想要的效果。

以上就是css3模拟点九图原理的过程,希望可以帮助到前端小伙伴们。

感谢我的设计师张恒,奇奇怪怪的知识又增加了。


转载请注明原文链接:web端的“点九”图
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址