echarts的边框图片之切图（重要）以及公共面板样式的制作

蔡菜小奥比

已于 2022-08-03 09:43:15 修改

阅读量2k

点赞数 3

分类专栏： ECharts数据可视化文章标签： echarts css

于 2022-04-14 20:50:27 首次发布

本文链接：https://blog.csdn.net/huang_99/article/details/124179490

版权

ECharts数据可视化专栏收录该内容

4 篇文章 3 订阅

订阅专栏

本文详细介绍了如何使用边框图片进行网页样式设计，包括边框图片的切图原理、语法应用，以及在实际开发中遇到的问题和解决方案。通过封装公共面板样式，实现边框图片的复用，并提供了具体的HTML和CSS代码示例。此外，还探讨了边框图片在不同重复模式下的显示效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

边框图片

一、使用场景

盒子大小不一，但是边框样式相同，此时就需要边框图片来完成。

二、边框图片的切图原理：（重要）

把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕。（那个角大，就以谁为准来切）

按照上、右、下、左的顺序切割。

在这里插入图片描述

三、边框图片语法：（重要）

在这里插入图片描述

<style>
        div{
            width: 400px;
            height: 300px;
            border: 15px solid pink;
            border-image-source: url(images/border.jpg);
            /*这个数字是图片切割的高度，第一个格子....，上右下左，记住，一定不要加单位 */
            border-image-slice: 167 167 167 167;
            /*这个属性默认的是border的宽度 ，但是有区别，这个是边框图片的宽度，不会挤压文字 */
             border-image-width: 30px;
             border-image-repeat: repeat;
        }
    </style>

如果用了 border-image-repeat: repeat; ，会出现以下的问题，看下图：（会有些出现不完整），如果你就是想要这种效果，也可以保留。
在这里插入图片描述
border-image-repeat 的三种效果如下图所示，可自行选择合适的。

四、公共面板样式开发

在这里插入图片描述
因为多处地方都是用这个边框图片，所以直接就封装一个边框图片的样式，哪里需要，哪里就调用就好了。

 <!--  HTML 代码   父容器大盒子 -->
    <div class="viewport">
        <div class="column">
            <div class="panel"></div>
        </div>
        <div class="column">2</div>
        <div class="column">3</div>
    </div>

/* css代码 */
/* 封装一个公共面板样式 */
.panel {
    border: 15px solid red;
    /* 相当于border-width: 51px 38px 20px 132px; */
    border-width: .6375rem .475rem .25rem 1.65rem;
    border-image-source: url(../images/border.png);
    border-image-slice: 51 38 20 132;
}

注意：
（1）如果我们给了边框的宽度（border-width），我们就不用再给边框图片的宽度（border-image-width）了，会默认和边框宽度一样。
（2）边框宽度的单位需要转换为rem，而切割（border-image-slice）用上图的px数值就好，但是不带单位的哦！！！

会出现的一些问题：

在 .panel 类的 div 里写123123 内容，但是运行结果的123123并不是在边框的左上角位置，而是在切割的位置。在这里插入图片描述

解决办法：把上面的黄色部分内容，给一个子盒子.inner，同时给他绝对定位（因为给他绝对定位也不会盖住边框图片），top、left、right、bottom值都给他拉伸到和父盒子一样的大小，父盒子给相对定位。

最后小结一下代码：

 <!-- HTML代码 父容器大盒子 -->
    <div class="viewport">
        <div class="column">
            <div class="panel">
                <div class="inner">123</div>
            </div>
        </div>
        <div class="column">2</div>
        <div class="column">3</div>
    </div>

/* css代码  公共面板样式 */
.panel {
    position: relative;
    border: 15px solid transparent;
    /* 相当于border-width: 51px 38px 20px 132px; */
    border-width: .6375rem .475rem .25rem 1.65rem;
    border-image-source: url(../images/border.png);
    border-image-slice: 51 38 20 132;
    margin-bottom: .25rem;
}
.inner{
    position: absolute;
    top:-0.6375rem;
    left: -1.65rem;
    right: -0.475rem;
    bottom: -0.25rem;
    padding: .3rem .45rem;
    background-color: red;
}