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

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

边框的宽度你可以根据上传图片，自己修改，建议图片宽度一般为600像素左右，边框默认宽度为640，我这里是修改为：780px，边框里文字随意修改为歌曲的歌词等

<div style="max-width:780px; margin:0 auto; padding:20px 0;">
<div style="border:1px solid #212121; background:#fafafa; padding:25px 20px; box-shadow:0 2px 0 #212121;">
<h3 style="color:#212121; margin:0 0 1em; text-align:center; font-weight:normal; letter-spacing:2px;">水墨主题内容</h3>

<p style="color:#424242; text-align:center; font-family:'SimSun', serif;">
   极简线条边框搭配留白设计<br>
   黑白色调呈现禅意，适合散文、艺术类内容
</p>
<p style="color:#424242; text-align:center; font-family:'SimSun', serif;">
   可自由添加散文片段、水墨画作描述、禅意短句等内容<br>
   段落间距由浏览器自然控制，呼应留白美学
</p>

<div style="margin-top:1em; text-align:center; padding:15px; background:#f5f5f5; border-top:1px dashed #bdbdbd;">
   <p style="color:#212121; margin-bottom:10px; font-size:14px; letter-spacing:1px;">生命树下-你是我唯一的依靠</p>
   <audio controls loop style="width:100%;max-width:300px;" src="https://www.joy127.com/url/147285f1b02b9c.mp3"></audio>
</div>
</div>
</div>

<script>
setTimeout(function(){
var audio = document.querySelector('audio');
if(audio){
audio.loop = true;
try { audio.play(); } catch(e) {}
}
}, 500);
</script>

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

<div style="text-align: center;">效果如下，附上一首好听的音乐试听
<div style="max-width:780px; margin:0 auto; padding:20px 0;">
<div style="border:1px solid #212121; background:#fafafa; padding:25px 20px; box-shadow:0 2px 0 #212121;">
<h3 style="color:#212121; margin:0 0 1em; text-align:center; font-weight:normal; letter-spacing:2px;">水墨主题内容</h3>

<p style="color:#424242; text-align:center; font-family:'SimSun', serif;">
   极简线条边框搭配留白设计<br>
   黑白色调呈现禅意，适合散文、艺术类内容
</p>
<p style="color:#424242; text-align:center; font-family:'SimSun', serif;">
   可自由添加散文片段、水墨画作描述、禅意短句等内容<br>
   段落间距由浏览器自然控制，呼应留白美学
</p>

<div style="margin-top:1em; text-align:center; padding:15px; background:#f5f5f5; border-top:1px dashed #bdbdbd;">
   <p style="color:#212121; margin-bottom:10px; font-size:14px; letter-spacing:1px;">生命树下-你是我唯一的依靠</p>
   <audio controls loop style="width:100%;max-width:300px;" src="https://www.joy127.com/url/147285f1b02b9c.mp3"></audio>
</div>
</div>
</div>

<script>
setTimeout(function(){
var audio = document.querySelector('audio');
if(audio){
audio.loop = true;
try { audio.play(); } catch(e) {}
}
}, 500);
</script>

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

<div style="max-width:640px;margin:0 auto;padding:20px 0;">
<div style="border:2px solid #8b0000;background:#fffaf0;padding:25px 20px;">
<h3 style="color:#8b0000;margin:0 0 1em;text-align:center;font-family:SimHei;">音乐标题</h3>
<p style="color:#333;text-align:center;line-height:2;">今生缘浅未相守<br>几世痴念几度愁</p>
<div style="margin-top:1em;text-align:center;padding:15px;background:#fdf3f3;border-top:1px solid #eac1c1;">
<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:37

效果：
<div style="max-width:640px;margin:0 auto;padding:20px 0;">
<div style="border:2px solid #8b0000;background:#fffaf0;padding:25px 20px;">
<h3 style="color:#8b0000;margin:0 0 1em;text-align:center;font-family:SimHei;">音乐标题</h3>
<p style="color:#333;text-align:center;line-height:2;">今生缘浅未相守<br>几世痴念几度愁</p>
<div style="margin-top:1em;text-align:center;padding:15px;background:#fdf3f3;border-top:1px solid #eac1c1;">
<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:38

<div style="max-width:640px;margin:0 auto;padding:20px 0;">
<div style="border:1px solid #eee;background:#fff;padding:30px 25px;border-radius:10px;">
<h3 style="color:#666;text-align:center;font-weight:normal;">人间烟火</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:39

效果：
<div style="max-width:640px;margin:0 auto;padding:20px 0;">
<div style="border:1px solid #eee;background:#fff;padding:30px 25px;border-radius:10px;">
<h3 style="color:#666;text-align:center;font-weight:normal;">人间烟火</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:40

<div style="max-width:640px;margin:0 auto;padding:20px 0;">
<div style="background:#2c2c2c;padding:30px;border-radius:8px;">
<h3 style="color:#fff;text-align:center;">深夜独白</h3>
<p style="color:#ccc;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;background:#444;" src="https://www.joy127.com/url/14739898255194.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:41

效果：
<div style="max-width:640px;margin:0 auto;padding:20px 0;">
<div style="background:#2c2c2c;padding:30px;border-radius:8px;">
<h3 style="color:#fff;text-align:center;">深夜独白</h3>
<p style="color:#ccc;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;background:#444;" src="https://www.joy127.com/url/14739898255194.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:42

<div style="max-width:640px;margin:0 auto;padding:20px 0;">
<div style="background:#fdf6f8;padding:30px;border:1px solid #f7dce5;border-radius:10px;">
<h3 style="color:#c95a7a;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:43

效果：

<div style="max-width:640px;margin:0 auto;padding:20px 0;">
<div style="background:#fdf6f8;padding:30px;border:1px solid #f7dce5;border-radius:10px;">
<h3 style="color:#c95a7a;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>

页: [1] 2 3

云荷-个人作品展示's Archiver

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