【CSS】四角边框

百事无成_影黎君

已于 2024-09-20 15:52:38 修改

阅读量572

点赞数 5

分类专栏： Vue3 文章标签： css 前端

于 2024-07-30 19:57:09 首次发布

本文链接：https://blog.youkuaiyun.com/LY_z_/article/details/140805190

版权

Vue3 专栏收录该内容

3 篇文章

订阅专栏

效果演示（很适合大屏）：

代码（给需要的盒子加上样式即可）：

box-shadow: 0 0 1.5vw #1f69b9b9 inset;
background: linear-gradient(#33cdfa, #33cdfa) left top,
    linear-gradient(#33cdfa, #33cdfa) left top,
    linear-gradient(#33cdfa, #33cdfa) right top,
    linear-gradient(#33cdfa, #33cdfa) right top,
    linear-gradient(#33cdfa, #33cdfa) left bottom,
    linear-gradient(#33cdfa, #33cdfa) left bottom,
    linear-gradient(#33cdfa, #33cdfa) right bottom,
    linear-gradient(#33cdfa, #33cdfa) right bottom;
background-repeat: no-repeat;
background-size: 0.1vw 1.5vw, 1.5vw 0.1vw;