css让图片的某些区域拉伸，其他部分保持比例，起到类似于安卓中点九.9图的效果

前言

做过安卓开发的都知道点九图，我们在一张图片的上边框、左边框用鼠标拖动一下，就能决定某一张图片哪些区域可以被拉伸，如下图：
在这里插入图片描述
上图中红色区域是可以被拉伸的，四个角落的白色区域是不会被拉伸的。比较典型的一个应用场景是聊天界面中的气泡，由于每次打的字内容长度都不一样，所以聊天气泡需要被拉伸以便能刚好容纳大家发送的内容。但是，如果随意拉伸，很可能就会出现下图的效果（图片摘自郭霖的《第一行代码》）：
在这里插入图片描述
如果有了点9图，那么就能实现下图的效果：

怎么样，是不是好看、清晰了许多？

css中的解决办法

css中也有类似的解决方案，防止图片被随意拉伸，能保证四个角落不被拉伸，下面我直接举一个例子就好了。网上别人对border-image做了很详细的解释，但是可能就是因为太详细了，让人抓不到重点。

示例代码

DOCTYPE html>
<head>
    <style>
        #round {
            border-image-source: url('./images/nn.png');
            border-image-slice: 10 280 210 10 fill;
            border-top: 10px solid;
            border-right: 280px solid;
            border-bottom: 210px solid;
            border-left: 10px solid;
            height: 358px;
            width: 806px;
        }
    style>
head>
<body>
    <div id="round">
        测试
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

我本人准备了一张尺寸为806x358的图片，名为nn.png。上图我指定宽为806px，高为358px，这应该没啥问题，因为图片没有被拉伸，显示效果如下图所示：
在这里插入图片描述
那假如我修改css中的height为600px，右下角的奶牛猫会不会变形呢?这是不会的，如下图：

同理，我修改高度为200，奶牛猫也不会变形，如下图：

css的解释

border-image-source

这个就算我不说，相信你也知道，就是用来指定图片的

border-image-slice

这个是用来切割图片的，砍了四刀（顺序为上砍->右砍->下砍->左砍），一张图片就会变成9张图，如下图所示：
在这里插入图片描述
那为什么我指定的是这4个值：10 280 210 10呢？
重点是右砍280px和下砍210px，其实只要能把奶牛猫从右下角给砍出去就可以了，这样拉伸后奶牛猫就不会变形。注意最后还要指定四个边的border属性，不然就相当于裁剪了，连奶牛猫都看不到！

相关阅读:
（22）STM32——RTC时钟笔记（基于正点原子探索者）
全球顶尖数据中心排行榜上的领军者TOP10——Verizon
【深度学习实验】前馈神经网络（六）：自动求导
IDEA中SpringBoot项目的yml多环境配置
UE4蓝图节点不同颜色代表
现代检测技术课程实验编程：波特图分析仪原理仿真：一阶检测系统编程仿真
一例jse蠕虫的分析
函数及函数操作
国产低功耗MCU芯片：Si24R03
小程序壁纸demo，数据采集第三方的，没有服务端

原文地址：https://blog.csdn.net/Deep_rooted/article/details/126451944