简单“边框”的制作方法

博客制作 2010-11-20 15:55:59 阅读2 评论0 字号：大中小

hdly006502

在制作音画作品及发表图片时,给它添加一幅漂亮的边框.这也许是许多博

友想做的...那么,该如何来为它添加漂亮的边框呢？

其实,制作‘边框’的方法有很多种,比如用Word、PS等软件都可以制作出

边框. 但这就要求你必须有一定的电脑专业知识,对于一般的朋友来说还是有点

难度的.

今天,笔者向大家介绍一种简便、制作容易的的方法:

那就是用代码直接制作音画、日志的边框.

首先,看下面的这段基本代码:

原始代码:(如下)

<TABLE style="BORDER-RIGHT: #0000ff 7pt double; BORDER-TOP: #0000ff 7pt double; BORDER-LEFT: #0000ff

7pt double; BORDER-BOTTOM: #0000ff 7pt double" width="80%" align=center>

<TBODY>

<TR>

熟悉上述代码概念及用法

代码解析: 1、BORDER-RIGHT:表示该边框的右边框线;LEFT表示左边框线;TOP、BOTTOM表示上、下边框线;

2、#0000ff 表示该边框线的颜色,有关颜色的选取请参见《颜色速查表》一文;

3、7pt表示该边框线的粗细度,可根据需要改变其数值;4、上述代码中的红色部分double表示该边框为单线边框、double为双线边框、outset表示为凸出型边框、inset为凹槽型边框、dashed为虚线型边框等

4、align=center 表示该边框在日志中居正中位置, 需要说明的是:日志页面的总宽度一在720至800之间.只有宽度值小于700以下时,边框才会出现居左、居右或居中的现象出现;详细内容,请参见---《如何调整“边框”在日志页面的宽度及高度?》一文的解讲;

5、如果去除上述代码中的最后一行中的bgColor=#ffffff代码, 最终该边框内部的颜色显示为你日志页面的颜色.如果你想在该边框内添加一种背景颜色,只要在粉红处改变颜色代码即可. 例:#ffffff表示内框背景为白色,现在需要黑色作为背景颜色只要改为#00000即可.

有关颜色的选取请参见《颜色速查表》一文.

修改代码后,可获得如下几种不同边框的效果图:

你只需要改变上述代码中的部分代码及数值复制该代码后,就可以获得形状不同的边框.

如:<1>单线边框、<2>双线边框、<3>立体阴影边框、<4>凸线边框、<5>凹线边框、<6 >邮票型边框、<7>粒状阴影型边框、<8>虚线边框等等

1、单线型边框:

代码复制区:

<TBODY>

<TR>

效果图如下:(可直接复制使用)

填写内容

2、双线型边框:

代码复制区:

<TR>

效果图如下:(可直接复制使用)

填写内容

3、凸出型边框:

代码复制区:

<TBODY>

<TR>

效果图如下:(可直接复制使用)

填写内容

4、凹陷型边框:

代码复制区:

<TBODY>

<TR>

效果图如下:(可直接复制使用)

填写内容

5、虚线型边框:

代码复制区:

<TBODY>

<TR>

效果图如下:(可直接复制使用)

填写内容

6、脊状立体型边框:

代码复制区:

<TBODY>

<TR>

效果图如下:(可直接复制使用)

填写内容

7粒状阴影框:

代码复制区:

<TBODY>

<TR>

效果图如下:(可直接复制使用)

填写内容

8、立体阴影框:

代码复制区: <TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145, strength:15)" height=55 cellSpacing=6 width="99%" border=1>

<TBODY>

<TR>

效果图如下:(可直接复制使用)

填写内容

9、邮票型边框:

代码复制区:

<TBODY>

效果图如下:(可直接复制使用)

填写内容

10, 凹状双内虚线框:

代码复制区:

<TBODY>

<TR>

效果图如下:(可直接复制使用)

填写内容

最后,说明:

根据上述原始代码,稍作修改后还可以制作出许多漂亮的图片边框.比如将上述代码改为:

代码复制区:

<P align=center><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,

strength=20"

src="http://image17.360doc.com/DownloadImg/2010/11/2100/6967357_1.jpg">

</P>

效果图如下:

具体操作步骤,请参见---

◇怎样给"图片"添加漂亮的边框?◇

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。