网站首页 › ┫播放器版┣ › 【九款边框】简约边框代码

楚云飞 发表于 2026-4-7 11:12:44

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

楚云飞 发表于 2026-4-7 11:12:45

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

楚云飞 发表于 2026-4-7 11:12:46

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

楚云飞 发表于 2026-4-7 11:12:47

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

楚云飞 发表于 2026-4-7 11:12:48

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

楚云飞 发表于 2026-4-7 11:12:49

效果：

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

楚云飞 发表于 2026-4-7 11:12:50

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

楚云飞 发表于 2026-4-7 11:12:51

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

绿蔷薇 发表于 2026-4-7 12:06:58

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

绿蔷薇 发表于 2026-4-7 12:07:15

谢谢云飞的分享，辛苦，上茶~~{:1_153:}

查看完整版本: 【九款边框】简约边框代码