559° Mar 18, 2011 12:29 • 2011 • 886字 • 0条评论

文字加边框

本来Cyan童鞋想做个公告框一样的东西放在首页上，效果大概像这样：

走自己的路难免会崴脚。

于是Cyan就谷搜了给文字加边框的方法，竟然不是件容易的差事！Cyan震惊了，于是决定记笔记。
（最近更博忒勤快，到了更博发春期了呀。）

| 最先找到的是一种比较简单的给文字加边框加背景的方法。之前Cyan在玩msn space的时候有涉及过，还依稀记得这种方法与直接高亮文字的差别。那么先介绍下这个方法。以下内容参考自给文字加边框的代码 | 阿秋的BLOG。

走自己的路难免会崴脚。

以上文字边框代码如下：

<p style="text-align:center;background-color: #eeeeee; border: 1px solid #dddddd;">
走自己的路难免会崴脚。</p>

通式：

<p style="text-align: 文字排列; background-color: 背景颜色; border: 边框粗细 边框形态 边框颜色;">文字内容</p>

例：

实线

<div style="text-align:center;background-color: #eeeeee; border: 1px solid #000;">实线</div>

虚线

<div style="text-align:center;background-color: #eeeeee; border: 1px dashed #000;">虚线</div>

点线

<div style="text-align:center;background-color: #eeeeee; border: 1px dotted #000;">点线</div>

双线

<div style="text-align:center;background-color: #eeeeee; border: 3px double #000;">双线</div>

另外还有一种样式，不能用通式解，就单独放出来：

外凸

<div style="text-align:center; border-style: outset; border-width: 1px;">外凸</div>

| 上面的方法简单易懂，但是对于Cyan有个致命伤，就是没法自定义宽度（Cyan找不到Cyan不会Cyan傻），所以Cyan继续努力找到了一个复杂点的，同时功能也更强大的方法。最后的效果就如开头所述一样，代码如下：

走自己的路难免会崴脚。

<div align="center">
<table cellspacing="0" style="background-color: #eeeeee; border: 1px solid #dddddd;">
<tbody>
<tr>
<td>走自己的路难免会崴脚。</td>
</tr>
</tbody>
</table>
</div>

基本格式就是 <table><tbody><tr><td></td></tr></tbody></table>。如果想表中表，就把这行代码复制插入 <td> 和 </td> 之间。具体可参见怎样用代码做外边框和内边框 | 佳恒博客。

2013-7-2补充：现在回头看以前这些问题才意识到两年间我还是有些进步的。

其实就是 css 中的边框属性，具体可见 w3cschools，不同线型效果测试。
除了 outset，当然还有 inset。

而自定义宽度不需要用到表格，css 也能解决：

走自己的路难免会崴脚。

<div style="text-align:center; width:300px;background-color:#eee;border:1px solid #ddd;">走自己的路难免会崴脚。</div>

继续努力吧！

EOF