CSS科技感四角边框

实现效果:使用before和after就可以实现,代码量不多,长度颜色都可以自己调整

实现代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; background:#040d32; } .border-box{ position: relative; margin:300px auto; width:400px; height:300px; background: rgba(1, 19, 67, 0.8); border: 2px solid #00a1ff; border-radius: 8px; } .border-box::before { position: absolute; top: -2px; bottom: -2px; left: 30px; width: calc(100% - 60px); content: ""; border-top: 2px solid #016886; border-bottom: 2px solid #016886; z-index: 0; } .border-box::after { position: absolute; top: 30px; right: -2px; left: -2px; height: calc(100% - 60px); content: ""; border-right: 2px solid #016886; border-left: 2px solid #016886; z-index: 0; } .border-box p{ line-height:100px; text-align: center; color:#00a1ff; } </style> </head> <body> <div class="border-box"> <p>css实现科技感边框</p> </div> </body> </html>

原文链接:https://blog.csdn.net/liona_koukou/article/details/106898470?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277097916781432910074%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277097916781432910074&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-25-106898470-null-null.nonecase&utm_term=%E7%A7%91%E6%8A%80

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片