前端web的点9图效果实现

这里只是一个怕自己忘记写的一个笔记，不是很全很详细，建议还是看官方教程

首先直接上代码

border-width: 1px;
border-style: solid;
border-image: url("image.png")   0 170 0 170 fill / 1px 170px stretch;

下面是原始图片

image.png

image.png 图片原始像素是348 x 220

我的需求是拉伸image可以自适应内容长度，但是拉伸不能导致两边的半圆被拉成椭圆

需求的成品图是这样的

实现效果.png

这里就说说是怎么实现的

border-image可以使用图片作为border(标准说法：border-image CSS属性允许在元素的边框上绘制图像), 给出图片后可以通过相应的参数来调整图片的拉伸，这样就可以像点9图那样保留部分内容不变的情况下，拉伸可拉伸部分来自适应。
我主要解释一下border-image: url("image.png") 0 170 0 170 fill / 1px 170px stretch,
这里0 170 0 170就是划分了原始图片内容,称之为border-image-slice

划分.png

因为我不在乎高度，只管左右的拉伸，所以有两个y方向的0，左右各选了170像素，这个部分是不会因为width增加而改变的。 fill字段就是让两个| | 中间的部分填充背景，

后面的1px 170px指的是border-image-width ，字面意思是边框图片宽度，作用是将 DOM 节点分割成九宫格，这里指的就是作为实际容器的那个节点的显示范围了，我也设置为170， stretch作为border-image-repeat说明图片在超过原始长度后使用拉伸的方式

全部代码

<html>
    <head>
        <title>border-image</title>
    </head>
    <style>
        body{
            background: black;
        }

        .con{
            height: 220px;
            padding: 0px 50px;
            width: fit-content;
            color: white;
            border-width: 1px;
            border-style: solid;
            border-image: url(image.png) 0 170 0 170 fill / 1px 170px stretch;
        }
        .ctn{
            position: relative;
            top: 96px;
        }
    </style>
    <body>
        <img id="img" src="image.png" />

        <div class="con">
            <span class="ctn">我是内容我是内容我是内容我是内容我是内容我是内容</span>
        </div>
    </body>
</html>

前端web的点9图效果实现