css 如何实现div边框四个角的颜色不一样 - 忆点点的专栏

可以伪元素和其他div来创建看起来像是边框的元素，并分别为它们设置不同的背景色，模拟四个角有不同颜色的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-with-different-corners {
            position: relative;
            width: 200px;
            height: 50px;
            background-color: #abcdff;
        }
        /* 左上角 */
        .div-with-different-corners::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 25px;
            /* 或者你想要的任何尺寸 */
            height: 5px;
            /* 或者你想要的任何尺寸 */
            background-color: red;
            /* 上左角颜色 */
            z-index: 10;
        }
        /* 右上角 */
        .div-with-different-corners::after {
            content: '';
            position: absolute;
            top: 0px;
            right: 0px;
            width: 25px;
            /* 或者你想要的任何尺寸 */
            height: 5px;
            /* 或者你想要的任何尺寸 */
            background-color: blue;
            /* 上右角颜色 */
            /* z-index: 10; */
            /* transform: rotate(90deg); */
            /* 旋转角度，使其看起来像是右上角 */
        }
        /* 左下角 */
        .leftbottom_border {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 25px;
            /* 或者你想要的任何尺寸 */
            height: 5px;
            /* 或者你想要的任何尺寸 */
            background-color: purple;
            /* 上左角颜色 */
            z-index: 10;
        }
        /* 右下角 */
        .rightbottom_border {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 25px;
            /* 或者你想要的任何尺寸 */
            height: 5px;
            /* 或者你想要的任何尺寸 */
            background-color: palevioletred;
            /* 上左角颜色 */
            z-index: 10;
        }
    </style>
</head>
<body>
    <div class="div-with-different-corners">
        <div class="leftbottom_border"></div>
        <div class="rightbottom_border"></div>
    </div>
</body>
</html>

这里之所以还要新家两个div，是因为伪类不要创建四个元素出来，只用伪类实现了两个，然后自己写了两个。

效果图：