【九款边框】简约边框代码

楚云飞

1. <div style="max-width:640px;margin:0 auto;padding:20px 0;">
   
2. <div style="background:#f8f4e8;padding:30px;border:1px solid #d9c79f;">
   
3. <h3 style="color:#8b0000;text-align:center;font-family:SimSun;">早春又迟</h3>
   
4. <p style="color:#333;text-align:center;line-height:2;font-family:SimSun;">早春又迟<br>东风有信终将至</p>
   
5. <div style="margin-top:20px;text-align:center;">
   
6. <audio controls loop style="width:100%;max-width:300px;" src="mp3地址"></audio>
   
7. </div>
   
8. </div>
   
9. </div>
   
10. <script>setTimeout(()=>{let a=document.querySelector('audio');a&&(a.loop=!0,a.play().catch(()=>{}))},500);</script>

复制代码

楚云飞

效果：

早春又迟

早春又迟
东风有信终将至

楚云飞

1. <div style="max-width:640px;margin:0 auto;padding:20px 0;">
   
2. <div style="background:#f2f9ff;padding:30px;border:1px solid #c8e0f5;border-radius:10px;">
   
3. <h3 style="color:#336699;text-align:center;">清风徐来</h3>
   
4. <p style="color:#555;text-align:center;line-height:1.8;">心若向阳<br>无畏悲伤</p>
   
5. <div style="margin-top:20px;text-align:center;">
   
6. <audio controls loop style="width:100%;max-width:300px;" src="mp3地址"></audio>
   
7. </div>
   
8. </div>
   
9. </div>
   
10. <script>setTimeout(()=>{let a=document.querySelector('audio');a&&(a.loop=!0,a.play().catch(()=>{}))},500);</script>

复制代码

楚云飞

效果：

清风徐来

心若向阳
无畏悲伤

楚云飞

1. <div style="max-width:640px;margin:0 auto;padding:20px 0;">
   
2. <div style="background:#fffbf0;padding:30px;border:1px solid #e6c88e;border-radius:8px;">
   
3. <h3 style="color:#b8860b;text-align:center;font-weight:bold;">岁月如歌</h3>
   
4. <p style="color:#666;text-align:center;line-height:2;">时光清浅<br>安然无恙</p>
   
5. <div style="margin-top:20px;text-align:center;">
   
6. <audio controls loop style="width:100%;max-width:300px;" src="mp3地址"></audio>
   
7. </div>
   
8. </div>
   
9. </div>
   
10. <script>setTimeout(()=>{let a=document.querySelector('audio');a&&(a.loop=!0,a.play().catch(()=>{}))},500);</script>

复制代码

楚云飞

效果：

岁月如歌

时光清浅
安然无恙

楚云飞

1. <div style="max-width:640px;margin:0 auto;padding:20px 0;">
   
2. <div style="padding:30px;border:1px dashed #999;background:#fff;">
   
3. <h3 style="color:#555;text-align:center;">时光不语</h3>
   
4. <p style="color:#777;text-align:center;line-height:1.8;">岁月无声<br>思念有痕</p>
   
5. <div style="margin-top:20px;text-align:center;">
   
6. <audio controls loop style="width:100%;max-width:300px;" src="mp3地址"></audio>
   
7. </div>
   
8. </div>
   
9. </div>
   
10. <script>setTimeout(()=>{let a=document.querySelector('audio');a&&(a.loop=!0,a.play().catch(()=>{}))},500);</script>

复制代码

楚云飞

效果：

时光不语

岁月无声
思念有痕

绿蔷薇

这些简约边框代妈好实用，做音乐帖正好用得到~~

绿蔷薇

谢谢云飞的分享，辛苦，上茶~~