css 样式截取图片设置边框，文字滚动，echarts 自适应屏幕

css 样式截取图片设置边框，文字上下滚动，echarts 自适应屏幕

首先 利用css样式截取

比如我们有一张这种边框图 想利用它作为边框去使用

效果是这样的

首先打开PS来测量需要截取的宽度 查看它的像素

css样式:

border: 15px solid transparent; //边框
border-width: (51/@rootwidth) (38/@rootwidth) (35/@rootwidth) (127/@rootwidth); //边框宽度转换
border-image-source: url(../images/border.png); //背景图
border-image-slice: 51 38 35 127; //截取数值 测量出来的
height: (40/@rootwidth);  //单独设置样式即可改变盒子高度

注意： 设置完成后需要使用父相子绝定位来改变实际盒子内容，不然会浪费很多容量。

文字上下滚动

给父盒子开启溢出隐藏，然后给ul子开启动画滚动，ul里面在写实际内容 如果内容不溢出无法实现功能

// 内容 滚动部分---
                            .bot {
                                width: (500/@rootwidth);
                                height: (260/@rootwidth);
                                // background-color: #6acca3;
                                // 溢出隐藏
                                overflow: hidden;

                                ul {
                                    animation: move 15s linear infinite;

                                    li {
                                        // 加入动画
                                        // 开启动画  15秒   匀速 循环等...
                                        width: 100%;
                                        height: (50/@rootwidth);
                                        // background-color: #4c9bfd;
                                        display: flex;
                                        align-items: center;
                                        justify-content: space-around;
                                        font-size: (10/@rootwidth);
                                    }
                                }
                            }

// 动画
@keyframes move {
    0% {}

    100% {
        transform: translateY(-50%);
    }
}