排名
6
文章
199
粉丝
4
评论
3
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：
50010702506256
50010702506256
欢迎加群交流技术
分类:
前端
可以伪元素和其他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，是因为伪类不要创建四个元素出来，只用伪类实现了两个，然后自己写了两个。
效果图：
欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)
评价