欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > CSS >内容正文

CSS

CSS科技感四角边框

发布时间：2024/3/26 CSS 58 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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>

 

总结

以上是生活随笔为你收集整理的CSS科技感四角边框的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。