正文

CSS实现好看的文字边框

果果
果果 V管理员/ / 0 评论/ 0 阅读
0808

浏览网站时看见一个好看的文字边框，通过几行CSS代码就能实现，特保存记录。

#wenmo_lvb{margin:10px 0;padding:15px 15px 15px 35px;border-color:#16a085;border-style:solid;border-width:1px 4px 4px 1px}
#wenmo_redb{margin:10px 0;padding:15px 15px 15px 35px;border-color:#ed0505;border-style:solid;border-width:1px 4px 4px 1px}
#wenmo_warn{margin:10px 0;padding:15px 15px 15px 35px;border-color:#eac946;border-style:solid;border-width:1px 4px 4px 1px}
#wenmo_tips{margin:10px 0;padding:15px 15px 15px 35px;border-color:#777;border-style:solid;border-width:1px 4px 4px 1px}
#wenmo_blue{margin:10px 0;padding:15px 15px 15px 35px;border-color:#2ba9fa;border-style:solid;border-width:1px 4px 4px 1px}
#wenmo_black{margin:10px 0;padding:15px 15px 15px 35px;border-color:#3e3e3e;border-style:solid;border-width:1px 4px 4px 1px}
#wenmo_orange{margin:10px 0;padding:15px 15px 15px 35px;border-color:#ec8006;border-style:solid;border-width:1px 4px 4px 1px}

使用时，调用代码格式如下，需要哪个颜色就选择哪个样式的ID。

<div id="wenmo_orange">
此处填写文字及超链接内容。
</div>

最终效果：

CSS实现好看的文字边框.jpg