文字加边框

@ 技能点满

本来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>

解释:
文字排列:居左-left | 居中-center | 居右-right,默认居左
背景颜色:填对应颜色代码
边框粗细:填数字,如1px,2px等等
边框形态:实线-solid | 虚线-dashed | 点线-dotted | 双线-double
边框颜色:填对应颜色代码

例:

实线
<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>

继续努力吧!


评论