用 fieldset + legend 组合，不用图片就能做出带圆角渐变小标题的版权声明框，适合放在文章页结尾。三种样式结构完全相同，只差边框和渐变配色，样式通用，什么主题都能贴。
放在哪里
两种放法：一是在主题设置的“文章与列表 – 文章页”里的版权声明输入处粘贴代码；二是直接贴到主题文章页模板的底部对应位置。
样式一：圆角边框加橙粉渐变标题
<div>
<fieldset style=" border: 1.5px dashed #008cff; padding: 10px; border-radius: 5px; line-height: 2em;font-weight: 700;color: var(--key-color);background-color: var(--body-bg-color);">
<legend align="center" style=" margin-bottom: -2px;width: 30%;text-align: center; background-color: #008cff; border-radius: 999px; background-image: linear-gradient(to right, #FFCC99, #FF99CC);border: 1.5px dashed #008cff;" >
版权声明
</legend>
<span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>你的站点名称</strong></span></span><br />
<span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://your-site.example.com</font><br />
<span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=qq号&site=qq&menu=yes" target="_blank">qq号</a>进行删除处理。<br />
<span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
<span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
<span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
</fieldset>
</div>样式二：蓝色虚线边框加蓝粉渐变标题
<div>
<fieldset
style="
border: 1px dashed #008cff;
padding: 10px;
border-radius: 5px;
line-height: 2em;
color: #6d6d6d;
"
>
<legend
align="center"
style="
width: 30%;
text-align: center;
background-color: #008cff;
border-radius: 5px;
background-image: linear-gradient(to right, #0066FF, #FF99CC); text-align:center;"
"
>
文章版权声明
</legend>
<span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>你的站点名称</strong></span></span><br />
<span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://your-site.example.com</font><br />
<span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=qq号&site=qq&menu=yes" target="_blank">qq号</a>进行删除处理。<br />
<span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
<span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
<span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
</fieldset>
</div>样式三：结构同上，渐变方向不同
<!--网站声明代码样式三 start-->
<div>
<fieldset
style="
border: 1px dashed #008cff;
padding: 10px;
border-radius: 5px;
line-height: 2em;
color: #6d6d6d;
"
>
<legend
align="center"
style="
width: 30%;
text-align: center;
background-color: #008cff;
border-radius: 5px;
background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;"
"
>
文章版权声明
</legend>
<span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>你的站点名称</strong></span></span><br />
<span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://your-site.example.com</font><br />
<span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=qq号&site=qq&menu=yes" target="_blank">qq号</a>进行删除处理。<br />
<span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
<span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
<span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
</fieldset>
</div>使用说明
三段代码里的站点名称、网址、联系方式都是占位示例，粘贴后务必改成自己站点的信息。第 3 条声明里预留了一个带 QQ 咨询链接的位置，把号码换成自己的即可，不用就去掉。颜色想调整的话，改 legend 上的 linear-gradient 和边框色号就够了，结构不用动。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容