怎样制作博客文章的边框

先把博客文章转换代码形式，就是点击工具栏的源代码他就会把字体转换为代码形式了，在把相应的边框代码添加进去，然后在点击工具栏的源代码，就会出现带边框的博文。下面给大家介绍几种边框代码。

★彩色边框代码★：

<div STYLE="border-style:solid;border-width:5pt;border-color:red">博客文章</div>

它会在你的文字外围生成一个红色边框，效果如框内显示。

border-style则控制边框的效果;

border-width控制边框的粗细;

border-color调整边框的颜色;

这里你仍然可以使用如#xxxxxx的颜色数值，而当使用“solid”则为单一颜色的线形简单边框。

★双线框代码★：

<div STYLE="border-style:Double;border-width:6pt; border-color: #f08080"> <div style="width:100%;height:100%;background-color:#FFdead;">文字</div></div>

这种双线框的效果有若隐若现的感觉，框的颜色是淡珊瑚色#f08080，框内背景的颜色是NAVAJO白#FFdead。效果如框内所示。

 

<div STYLE="border-style:Double;border-width:8pt; border-color: #8B008B"> <div style="width:100%;height:100%;background-color:#E6E6FA;">文字</div></div>

效果如框内，是带背景色（熏衣草色）的简单双线框。

 

★立体线框代码★：

<div style= "border-top-style:Ridge;border-right-style:Ridge;border-left-style:Ridge; border-bottom-style:Ridge;border-width:7pt; background-color:#8B008B"><div style="width:100%;height:100%;background-color:#E6E6FA;">文字</div></div>

效果如框内所示，是带背景色（熏衣草色）的浮出立体线框，代码中的#E6E6FA是背景的颜色（熏衣草色）