MSN Space进阶技巧---第三讲 立体彩色边框 <br> <br>原创:Loadmemory<br><br>拥有了背景色彩的日志显得生动活泼了许多,那么如何让她更具特色呢?在这一章里我将向大家讲述如何定制具有立体效果的背景样式。<br><br>我们先从为日志文字添加带有色彩的边框说起,因为其涉及到的CSS边框属性语法是以后制作立体效果边框的基础形式。请记住下面这段语法:<br><br><div STYLE="border-style:solid;border-width:5pt; border-color:red">日志文字</div><br><br>它会在你的文字外围生成一个红色边框,border-width控制边框的粗细,border-color调整边框的颜色,这里你仍然何以使用前文提到的形式如#xxxxxx的颜色数值,而border-style则控制边框的效果,当使用“solid”则为单一颜色的线形简单边框。<br><br>接下来我们再将上述语法扩展一下,就可以获得具有立体效果的彩色边框。那么从何下手呢?其实就是在border-style后面使用不同的语法描述:<br><br><br>Solid 简单线形边框 Double 简单双线边框 Groove 沟线立体效果边框 Ridge 脊线立体效果边框 Inset 嵌入线立体效果边框 Outset 浮出线立体效果边框<br><br>你可以在MSN Space日志中尝试一下上面不同的语法,然后在预览中观看效果。<br><br>通过定制边框的方法再将上一教程添加色彩的语法嵌套其中,你就可以创造出具有立体效果的彩色日志背景。<br><br>例如:<div STYLE="border-style

utset;border-width:2pt; border-color: red"><br><div style="width:100%;height:100%;background-color:#ffff00;">日志文字<br></div></div><br><br> <br><br>使用上述语法将会为你呈现一个黄底色红边框的浮出线效果背景,其实上述语法还有其他形式的简化写法,这里不再赘述,只采用上述较直接易理解形式。<br><br>对于背景边框的四个边你也可以按自己的需要进行调整,以左边框为例,你可以使用下述语法:<br><br>Border-left-style:solid (double, groove, ridge, inset, outset)定制边框样式<br>Border-left-color: #xxxxxx定制边框颜色<br>Border-left-width: xpt 定制边框粗细<br><br>其他三个边框只要分别使用Right, Top, Bottom就可以了。将下面的语法放到你的日志中预览一下,看一看是什么效果:<br><br><div style= "border-top-style

utset;border-right-style

utset;border-left-style

utset;<br>border-bottom-style

utset;background-color:#cc3366"><br><br>你可以按照自己的想法随意调整四个边框的式样,以便创造与众不同的效果,记住一点,不同的属性描述之间用 ; 隔开。另外,你可能会注意到,当你设置完边框返回到日志文本编辑模式,在键入文字过程中如果使用回车键,就会又出现一个边框,从而影响文字的连贯性,这是因为HTML语法中不支持硬回车。要解决这个问题,必须返回到HTML编辑模式,在需要回车的地方键入<br>,需要几次回车就键入几个<br>,然后再返回到文本编辑模式,你就会发现边框背景内已经为你加入了回车后的效果。