<html> <style> /* 内发光边框 */ .border1 { border: 2px solid #02a6b5; width: 100%; height: 100%; position: relative; margin: auto; box-sizing: border-box; } .border1:before { content: ''; position: absolute; width: 88%; bottom: -2px; top: -2px; left: 6%; border-bottom: 2px solid #0b3146; border-top: 2px solid #0b3146; } .border1:after { content: ''; position: absolute; height: 76%; left: -2px; right: -2px; top: 12%; border-left: 2px solid #0b3146; border-right: 2px solid #0b3146; } /* 内发光边框 */ .border2 { width: 100%; height: 100%; color: white; padding: 1rem; box-shadow: 0 0 3rem rgba(100, 200, 255, .5) inset; background: rgba(0, 0, 0, 0); box-sizing: border-box; } /* 半透明边框 */ .border3 { height: 100%; width: 100%; color: rgba(60, 240, 250, 1); font-size: 1.5rem; padding: 1rem; border-radius: .5rem; border: 1px solid rgba(0, 180, 220, 0.5); background: linear-gradient(180deg, rgba(0, 180, 220, 0.3), rgba(0, 180, 220, 0.1), rgba(0, 180, 220, 0.1), rgba(0, 180, 220, 0.3)); box-shadow: 0 0 2rem rgba(0, 180, 220, .1) inset; box-sizing: border-box; } /* 角标边框 */ .border4 { height: 100%; width: 100%; border: 1px solid rgba(22, 78, 137, 1); background: rgba(13, 35, 61, 1); position: relative; box-sizing: border-box; } .border4::after { content: attr(data-corner); display: block; position: absolute; top: 0; right: 0; width: 5rem; padding: 0 1rem; overflow: hidden; text-align: right; color: rgba(255, 255, 255, .9); background: linear-gradient(45deg, transparent 0%, transparent 30%, rgba(22, 78, 137, 1) 30%, rgba(22, 78, 137, 1) 100%) } /* 闪光动画边框 */ .border5 { position: relative; z-index: 0; width: 100%; height: 100%; padding: 1em; border-radius: 10px; overflow: hidden; box-sizing: border-box; } .border5::after { box-sizing: border-box; content: ''; position: absolute; z-index: -1; left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); background: rgb(14, 28, 44); border-radius: 8px; } .border5::before { box-sizing: border-box; content: ''; position: absolute; z-index: -2; left: -50%; top: -50%; width: 200%; height: 200%; background-color: transparent; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(#02a6b5, #02a6b5), linear-gradient(transparent, transparent), linear-gradient(#02a6b5, #02a6b5), linear-gradient(transparent, transparent); -webkit-animation: border5 10s linear infinite; animation: border5 10s linear infinite; } @-webkit-keyframes border5 { 100% { -webkit-transform: rotate(1turn); } } @keyframes border5 { 100% { transform: rotate(1turn); } } </style> <body style="background-color:#0e1c2c; display: flex;"> <div class="border1" style="width: 300px;height: 300px;margin: 10px;flex:1;"> 内发光边框 <p style="color: #fff;">内发光边框</p> </div> <div class="border2" style="width: 300px;height: 300px;margin: 10px;flex:1"> 内发光边框 <p style="color: #fff;">内发光边框</p> </div> <div class="border3" style="width: 300px;height: 300px;margin: 10px;flex:1"> 半透明边框 <p style="color: #fff;">半透明边框</p> </div> <div class="border4" data-corner="角标" style="width: 300px;height: 300px;margin: 10px;flex:1"> 角标边框 <p style="color: #fff;">角标边框</p> </div> <div class="border5" style="width: 300px;height: 300px;margin: 10px;flex:1"> 闪光动画边框 <p style="color: #fff;">闪光动画边框</p> </div> </body> </html>