数据可视化里边框图片

最新推荐文章于 2023-06-28 11:06:05 发布

susu1198

最新推荐文章于 2023-06-28 11:06:05 发布

阅读量668

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_47558015/article/details/116759882

jquery 专栏收录该内容

10 篇文章

订阅专栏

这篇博客探讨了如何在数据可视化中使用边框图片来增强图表的视觉效果。通过利用CSS和jQuery，作者展示了如何设置和调整边框图片，以创建独特且吸引人的图表样式。内容包括具体的样式设置技巧和实际案例，帮助读者理解并实现个性化数据展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性	描述
border-image-source	用在边框的图片的路径。（那个图片？）
border-image-slice	图片边框向内偏移。（裁剪的尺寸，一定不加单位，上右下左顺序）
border-image-width	图片边框的宽度（需要加单位）
border-image-repeat	图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch) 默认拉伸

样式设置如上表格

 1  内容在中间显示
      div {
            width: 400px;
            height: 300px;
            border: 15px solid pink;
            border-image-source: url(images/border.png);
            /* 不要跟单位 */
            border-image-slice: 30 30 30 30;
            /* border-image-slice: 30; */
            /* 这个属性默认的是 border的宽度 但是 有区别，  这个是 边框图片的宽度 不会挤压文字 */
            border-image-width: 30px;
            border-image-repeat: round;
        }
        <div class="out"> 第三方 </div>

注意 不能给里盒子设置宽高，因为设置就不能拉伸了
2 使内容显示在左上角，如下图
 <style>
        .out {
            //设置定位
            position: relative;
            width: 50px;
            height: 50px;
            background: pink;
            border: 1px solid #000;
            border-width: 51px 38px 20px 132px;
            border-image-source: url(images/border.png);
            border-image-slice: 51 38 20 132;
        }
        
        .inner {
            //设置定位
            position: absolute;
            /* background-color: skyblue; */
       //把原来的上，下，左，右的距离使用定位恢复成原来的大小
            top: -51px;
            right: -38px;
            bottom: -20px;
            left: -132px;
           //使用 padding挤一下距离
            padding: 20px;
        }
    </style>

    <div class="out">
        <div class="inner">123ggdg</div>
    </div>