css 如何实现div边框四个角的颜色不一样 电脑版发表于：2024/9/11 14:19 可以伪元素和其他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，是因为伪类不要创建四个元素出来，只用伪类实现了两个，然后自己写了两个。 效果图： 
