数据可视化大屏展示边框样式

最新推荐文章于 2024-07-10 16:05:14 发布

^草莓牛乳茶^

最新推荐文章于 2024-07-10 16:05:14 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签：信息可视化前端 html

本文链接：https://blog.csdn.net/2301_76882889/article/details/131432593

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、边框图片：

2、代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Irregular Gradient Border</title>
    <style>
        :root {
            /* 渐变边框色 */
            --line-bg: linear-gradient(180deg,
                    rgba(138, 203, 255, 1),
                    rgba(41, 106, 143, 1),
                    rgba(190, 40, 40, 1));
            /* 内容背景色 */
            --content-bg: linear-gradient(181deg, #021734 0%, #3d1328 100%);
            /* clip-path裁剪 */
            --path: polygon(0 0,
                    calc(100% - 10px) 0,
                    100% 10px,
                    100% 100%,
                    10px 100%,
                    0 calc(100% - 10px));
        }

        body {
            background: linear-gradient(270deg,
                    rgba(1, 33, 62, 0.95) 0%,
                    rgba(1, 33, 62, 0.9) 87%);
        }

        .dialog {
            position: relative;
            font-size: 20px;
            text-shadow: 0 10px 12px #001025;
            width: 300px;
            height: 350px;
        }

        .box {
            background: var(--line-bg);
            border-radius: 6px;
            position: relative;
            z-index: 2;
            min-width: 220px;
            min-height: 330px;
            padding: 10px;
        }

        .box::after {
            content: "";
            width: calc(100% - 4px);
            height: calc(100% - 4px);
            position: absolute;
            background: var(--content-bg);
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            border-radius: 4px;
        }

        .dialog-rect {
            width: 80%;
            height: 90%;
            position: absolute;
            right: -8px;
            bottom: -8px;
            border-radius: 6px;
            background: #66b5f3;
            clip-path: var(--path);
            z-index: 1;
            /* 将其层级设为比.box更低 */
        }

        .dialog-rect::after {
            content: "";
            position: absolute;
            width: calc(100% - 3px);
            height: calc(100% - 3px);
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            background: #093258;
            border-radius: 4px;
            clip-path: var(--path);
        }

        .dialog::after {
            content: "";
            border: 3px solid #32c5ff;
            width: 40%;
            height: 70%;
            position: absolute;
            left: -1px;
            top: -1px;
            z-index: 3;
            border-right: none;
            border-bottom: none;
            border-radius: 6px 0 0 0;
        }
    </style>
</head>

<body>
    <div class="dialog">
        <span class="dialog-rect"></span>
        <div class="box flex-row j_c">CSS 实现不规则边框（2）</div>
    </div>
</body>

</html>

原创：不要图片？CSS实现大屏常见不规则边框（系列二）_css不规则边框_苏苏哇哈哈的博客-CSDN博客

我根据这位大大的写的，就是大大代码，挪过来不能实现，不是我想要的效果