簡單「邊框」的製作方法

簡單「邊框」的製作方法博客製作 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: #0000ff7pt double; BORDER-BOTTOM: #0000ff 7pt double" width_="80%" align=center><TBODY><TR><TD bgColor=#ffffff>填寫內容</TD></TR></TBODY></TABLE>熟悉上述代碼概念及用法代碼解析: 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、單線型邊框:代碼複製區:<TABLE style="BORDER-RIGHT: red 4pt solid; BORDER-TOP: red 4pt solid; BORDER-LEFT: red 4pt solid; BORDER-BOTTOM: red 4pt solid" width_="99%" align=center><TBODY><TR><TD bgColor=#ffffff>填寫內容</TD></TR></TBODY></TABLE>效果圖如下:(可直接複製使用)填寫內容2、雙線型邊框:代碼複製區:<TABLE style="BORDER-RIGHT: #0000ff 7pt double; BORDER-TOP: #0000ff 7pt double; BORDER-LEFT: #0000ff 7pt double; BORDER-BOTTOM: #0000ff 7pt double" width_="99%"><TBODY><TR><TD bgColor=#CC9966>填寫內容</TD></TR></TBODY></TABLE>效果圖如下:(可直接複製使用)填寫內容3、凸出型邊框:代碼複製區:<TABLE style="BORDER-RIGHT:#33CC33 11pt outset; BORDER-TOP: #33CC33 11pt outset; BORDER-LEFT: #33CC33 11pt outset; BORDER-BOTTOM: #33CC33 11pt outset"width_="99%" align=center><TBODY><TR><TD bgColor=#9999ff>填寫內容</TD></TR></TBODY></TABLE>效果圖如下:(可直接複製使用)填寫內容4、凹陷型邊框:代碼複製區:<TABLE style="BORDER-RIGHT: #00ff00 11pt inset; BORDER-TOP: #00ff00 11pt inset; BORDER-LEFT: #00ff00 11pt inset; BORDER-BOTTOM: #00ff00 11pt inset" width_="99%" align=center><TBODY><TR><TD bgColor=#ffc9cc>填寫內容</TD></TR></TBODY></TABLE>效果圖如下:(可直接複製使用)填寫內容5、虛線型邊框:代碼複製區:<TABLE style="BORDER-RIGHT: #cc33ff 4pt dashed; BORDER-TOP: #cc33ff 4pt dashed; BORDER-LEFT: #cc33ff 4pt dashed; BORDER-BOTTOM: #cc33ff 4pt dashed" width_="99%" align=center><TBODY><TR><TD bgColor=#99ff00>填寫內容</TD></TR></TBODY></TABLE>效果圖如下:(可直接複製使用)填寫內容6、脊狀立體型邊框:代碼複製區:<TABLE style="BORDER-RIGHT: #cc9933 14pt ridge; BORDER-TOP: #cc9933 14pt ridge; BORDER-LEFT: #cc9933 14pt ridge; BORDER-BOTTOM: #cc9933 14pt ridge" width_="99%" align=center><TBODY><TR><TD bgColor=#cc9000>填寫內容</TD></TR></TBODY></TABLE>效果圖如下:(可直接複製使用)填寫內容7粒狀陰影框:代碼複製區:<TABLE style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66, strength=20" height=55 cellSpacing=6 cellPadding=0 width_="99%" border=1><TBODY><TR><TD bgColor=#cc9933>正文</TD></TR></TBODY></TABLE>效果圖如下:(可直接複製使用)填寫內容8、立體陰影框:代碼複製區: <TABLE style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145, strength:15)" height=55 cellSpacing=6 width_="99%" border=1><TBODY><TR><TD bgColor=#ffffff>填寫內容</TD></TR></TBODY></TABLE>效果圖如下:(可直接複製使用)填寫內容9、郵票型邊框:代碼複製區:<TABLE style="BORDER-RIGHT: #f6ae56 3px dashed; BORDER-TOP: #f6ae56 3px dashed; BORDER-LEFT: #f6ae56 3px dashed; WIDTH: 780px; BORDER-BOTTOM: #f6ae56 3px dashed; HEIGHT: 50px" cellSpacing=8 bgColor=#f6ae56><TBODY><TR bgColor=#33ccff ><TD>填寫內容</TD></TR></TBODY></TABLE>效果圖如下:(可直接複製使用)填寫內容10,凹狀雙內虛線框:代碼複製區:<TABLE borderColor=#0000ff cellSpacing=2cellSpacing=1width_=780 align=center border=10><TBODY><TR><TD style="border:3 dashed #00cc00">填寫內容</TD></TR></TBODY></TABLE>效果圖如下:(可直接複製使用)填寫內容最後,說明:根據上述原始代碼,稍作修改後還可以製作出許多漂亮的圖片邊框.比如將上述代碼改為:代碼複製區:<P align=center><IMG style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#ccFF66,strength=20"src="https://www.getit01.com/getimg_360.php?url=http://image17.360doc.com/DownloadImg/2010/11/2100/6967357_1.jpg"></P>效果圖如下:

具體操作步驟,請參見---◇怎樣給"圖片"添加漂亮的邊框?◇
推薦閱讀：