CSS科技感四角边框
生活随笔
收集整理的這篇文章主要介紹了
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科技感四角边框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux常见的文件内容查找和替换命令
- 下一篇： CSS 盒子的边距塌陷