彩色邊框樣式效果圖及代碼

学海网易博客

彩色邊框樣式效果圖及代碼

彩 色 边 框 樣 式 效 果 圖 及 代 碼边 框 代 码 说 明 代码WIDTH: 500px、HEIGHT: 50px为边框的宽和高、所有框边颜色#000000 、2px宽度数值自行尝试、代码BACKGROUND-COLOR: #E6E6FA 为框内背景颜色,不需要可删除。

无 色 框

代 码 如 下

<DIV style="BORDER-RIGHT: 2px none; BORDER-TOP: 2px none; BORDER-LEFT: 2px none; WIDTH: 500px; BORDER-BOTTOM: 2px none; HEIGHT: 50px; BACKGROUND-COLOR: #e6e6fa">

实 线 框

代 码 如 下

<DIV style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; WIDTH: 500px; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #E6E6FA; HEIGHT: 50px">

外 凸 框

代 码 如 下

<DIV style="BORDER-RIGHT: 1px outset; BORDER-TOP: 1px outset; BORDER-LEFT: 1px outset; WIDTH: 500px; BORDER-BOTTOM: 1px outset; BACKGROUND-COLOR: #E6E6FA; HEIGHT: 50px">

双 线 框

代 码 如 下

<DIV style="BORDER-RIGHT: #000000 3px double; BORDER-TOP: #000000 3px double; BORDER-LEFT: #000000 3px double; WIDTH: 500px; BORDER-BOTTOM: #000000 3px double; BACKGROUND-COLOR: #E6E6FA; HEIGHT: 50px">

虚 线 框

代 码 如 下

<DIV style="BORDER-RIGHT: #000000 1px dashed; BORDER-TOP: #000000 1px dashed; BORDER-LEFT: #000000 1px dashed; WIDTH: 500px; BORDER-BOTTOM: #000000 1px dashed; BACKGROUND-COLOR: #E6E6FA; HEIGHT: 50px">

虚 条 框

代 码 如 下

<DIV style="BORDER-RIGHT: 3px dashed; BORDER-TOP: 3px dashed; BORDER-LEFT: 3px dashed; WIDTH: 500px; BORDER-BOTTOM: 3px dashed; HEIGHT: 50px; BACKGROUND-COLOR: #e6e6fa">

平 条 框

代 码 如 下

<DIV style="BORDER-RIGHT: 4px solid; BORDER-TOP: 4px solid; BORDER-LEFT: 4px solid; WIDTH: 500px; BORDER-BOTTOM: 4px solid; HEIGHT: 50px; BACKGROUND-COLOR: #e6e6fa">

立 体 框 (一)

代 码 如 下

<DIV style="BORDER-RIGHT: #ff3333 4px outset; BORDER-TOP: #ff3333 4px outset; BORDER-LEFT: #ff3333 4px outset; WIDTH: 500px; BORDER-BOTTOM: #ff3333 4px outset; BACKGROUND-COLOR: #E6E6FA; HEIGHT: 50px">

立 体 框 (二)

代 码 如 下

<DIV style="BORDER-RIGHT: #6666ff 10px inset; BORDER-TOP: #6666ff 10px inset; BORDER-LEFT: #6666ff 10px inset; WIDTH: 500px; BORDER-BOTTOM: #6666ff 10px inset; HEIGHT: 50px; BACKGROUND-COLOR: #e6e6fa">

立 体 框 (三)

代 码 如 下

<DIV style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge; BORDER-LEFT: #00ff00 10px ridge; WIDTH: 500px; BORDER-BOTTOM: #00ff00 10px ridge; HEIGHT: 50px; BACKGROUND-COLOR: #e6e6fa">

立 体 框 (四)

代 码 如 下

<DIV style="BORDER-RIGHT: #00ff00 10px outset; BORDER-TOP: #00ff00 10px inset; BORDER-LEFT: #00ff00 10px inset; WIDTH: 500px; BORDER-BOTTOM: #00ff00 10px outset; HEIGHT: 40px; BACKGROUND-COLOR: #e6e6fa">

立 体 框 (五)

代 码 如 下

<DIV style="BORDER-RIGHT: #00ff00 10px inset; BORDER-TOP: #00ff00 10px outset; BORDER-LEFT: #00ff00 10px outset; WIDTH: 500px; BORDER-BOTTOM: #00ff00 10px inset; HEIGHT: 40px; BACKGROUND-COLOR: #e6e6fa">

表格语法简单介绍BORDER-RIGHT: #9b0000 6px ridge; 右边框颜色 宽度 样式

BORDER-TOP: #9b0000 6px ridge; 上边框颜色 宽度 样式

BORDER-LEFT: #9b0000 6px ridge; 左边框颜色 宽度 样式

BORDER-BOTTOM: #9b0000 6px ridge; 下边框颜色 宽度 样式;

外边框定位(相对定位) ; 内部小表格的定位(绝对定位) LEFT: 0px;

离左边的距离 TOP: 0px; 离顶部的距离 RIGHT: 0px; 离右边的距离

BOTTOMM: 0px; 离下边的距离 HEIGHT: 512px 表格高度 WIDTH: 512px; 表格宽度 表格边框的样式还有以下几种(换不同的值就会有不同的边框样式)∶

none 无色 | solid 实线 | outset 凸边 | dotted 虚线 | dashed 虚条 |

solid 平条 | double 双条 | groove 上阴下阳| ridge 上阳下阴 |

inset 左上深右下浅 | outset 左上浅右下深

注意点∶

如果不是宽屏外边框必须赋于相对定位.内部表格必须绝对定位. 上,下,左,右边框如果有不需要显示的,将该边的宽度值 设为0即可. 主要图片以背景的方式加入即放在&lt;*TABLE&gt;里更好一些.即放在<*TABLE>里更好一些。

学海博客欢迎您！

学海博客欢迎您选用！ 学海博客欢迎您选用！

欢迎您光临学海博客欢迎您光临学海博客欢迎您

学海网易博客