华严经电影下载:立体彩色边框代码之制作闪动边框的代码

来源:百度文库 编辑:中财网 时间:2024/04/29 21:02:25
日志文字
代码如下:
日志文字

它会在你的文字外围生成一个红色边框,border-width控制边框的粗细,border-color调整边框的颜色,这里你仍然何以使用前文提到的形式如#xxxxxx的颜色数值,而border-style则控制边框的效果,当使用“solid”则为单一颜色的线形简单边框。接下来我们再将上述语法扩展一下,就可以获得具有立体效果的彩色边框。那么从何下手呢?其实就是在border-style后面使用不同的语法描述:Solid 简单线形边框   Double 简单双线边框   Groove 沟线立体效果边框 Ridge 脊线立体效果边框   Inset 嵌入线立体效果边框  Outset 浮出线立体效果边框你可以在MSN Space日志中尝试一下上面不同的语法,然后在预览中观看效果。通过定制边框的方法再将上一教程添加色彩的语法嵌套其中,你就可以创造出具有立体效果的彩色日志背景。例如:

日志文字

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

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

它会在你的文字外围生成一个红色边框,效果如框内显示。
border-style则控制边框的效果
border-width控制边框的粗细,
border-color调整边框的颜色,
这里你仍然可以使用如#xxxxxx的颜色数值,而当使用“solid”则为单一颜色的线形简单边框。
实线

★双线框代码★
文字

效果如框内,是带背景色(熏衣草色)的简单双线框。
文字

显示的效果是背景色为桃色的简单双线框。效果如框内所示,边框的颜色是橙红色#ff4500,框内背景色为桃色#ffdab9。
文字

显示的效果是背景色为NAVAJO白的简单双线框。效果如框内所示,边框的颜色是橙红色#ff4500,框内背景色为桃色#ffdead。
文字

背景颜色为淡黄色#FFFFE0,效果如框内所示。
文字

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

这种双线框的效果有若隐若现的感觉,框的颜色是淡珊瑚色#f08080,框内背景的颜色是淡黄色#FFFFE0。效果如框内所示。
★立体线框代码★
文字

效果如框内所示,是带背景色(熏衣草色)的浮出立体线框,代码中的#E6E6FA是背景的颜色(熏衣草色)
文字

背景为粉红色,效果如框内所示。
文字

背景为桃色,效果如框内所示。
立体效果的彩色边框是在border-style后面使用不同的语法描述:
Solid 简单线形边框 Double 简单双线边框 Groove 沟线立体效果边框 Ridge 脊线立体效果边框 Inset 嵌入线立体效果边框 Outset 浮出线立体效果边框。
通过定制边框的方法再将上一教程添加色彩的语法嵌套其中,你就可以创造出具有立体效果的彩色日志背景。如:
日志文字

使用上述语法将会为你呈现一个NAVAJO白底色红边框的浮出线效果背景,效果如框内显示。
日志文字

显示的效果是背景色为桃色的立体线框。效果如框内所示,框内背景色为桃色#ffdab9。
对于背景边框的四个边你也可以按自己的需要进行调整,以左边框为例,你可以使用下述语法:
Border-left-style:solid (double, groove, ridge, inset, outset)定制边框样式 Border-left-color: #xxxxxx定制边框颜色 Border-left-width: xpt 定制边框粗细
其他三个边框只要分别使用Right, Top, Bottom就可以了。将下面的语法放到你的日志中预览一下,看一看是什么效果:(效果这里就不给出来了,有兴趣的可以回去试一下。)

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

2 加线框:
...

1px:框线宽度- 1 点 dashed:框线式样-虚线 #000000:框线式样-黑色 background-color:#FFFFE0:背景颜色-淡黄
可是 有时候 寂寞如海啸般袭来 令人窒息 无处可躲   深陷孤单的深渊中 无助 无力 只剩寒冷 黑暗  一个人承担 一个人等待阳光…
实线

外凸

双线

虚线

文字
效果是框线颜色为淡珊瑚色#f08080,宽度为1,背景色为桃色#ffdab9的虚线框。
文字
效果是框线颜色为淡珊瑚色#f08080,宽度为3,背景色为淡黄色#FFFFE0的虚线框。
实线

效果是框线宽度为3颜色为桃色#ffdab9,背景色为淡黄色#FFFFE0的实线框。
外凸

背景色为淡黄色的外凸效果
',1)">
闪动边框添加FLASH效果图
闪动边框添加FLASH效果图

闪动边框添加图片效果图一
FLASH地址:http://user.chollian.net/~lee1233/Flash5/050613_Ballet.swf

原图片

闪动边框添加图片效果图二

原图片

闪动素材一

闪动素材二
添加图片代码如下:





通用代码:





制作闪动边框代码如下:





闪动边框效果图
可以直接添加文字、图片或FLASH,边框自动随图片大小变化,使用起来很方便。
闪动边框彩色背景的代码及3款应用实例

添加图片效果图
春眠不觉晓
处处闻啼鸟
月来风雨声
花落知多少

添加文字、图片效果图


添加图片、图片效果图
效果图一
效果图二
效果图三
效果图四
效果图五





闪动素材五款
彩色双虚线边框代码及应用实例
长亭外,古道边,芳草碧连天,
晚风拂柳笛声残,夕阳山外山。
天之涯,海之角,知交半零落,
一瓢浊酒尽余欢,今宵别梦寒。

添加文字和图片效果图
在这里输入文字
效果图一
在这里输入文字
效果图二
在这里输入文字
效果图三
在这里输入文字
效果图四
在这里输入文字
效果图五
注   释
请与博文《制作闪动边框的代码及应用实例》对比效果差别,本代码边框内背景色可以根据图片主色调进行调整,使用更加方便,美观。