在页面结构设计中时常加进css来结构设计各式各样前面板式样和色调等,有时须要两个div只表明两个前面板,所以你可能会加进上面的许多方式。​

一、CSS border-width 特性

border-width是同时实现表明前面板的关键特性。用语如下表所示:

border-width:top right bottom left

模块表明:

top:上前面板特性,能增设画素,也能增设式样,原意为上前面板的长度。

right:右前面板特性,能增设画素,也能增设式样,原意为上前面板的长度。

bottom:下前面板特性,能增设画素,也能增设式样,原意为上前面板的长度。

left:左前面板特性,能增设画素,也能增设式样,原意为上前面板的长度。

其中画素如:10px 20px等

内置式样有:

thin:定义细的前面板;

medium:默认值,定义中等前面板;

thick:定义粗的前面板;

inherit:继承父元素的前面板长度。

二、CSS border-style 特性

border-style是用来增设前面板线式样的,语法如下表所示:

border-style:式样;

其中可增设的式样有:

none 定义无前面板。

hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决前面板冲突。

dotted 定义点状前面板。在大多数浏览器中呈现为实线。

dashed 定义虚线。在大多数浏览器中呈现为实线。

solid 定义实线。

double 定义双线。双线的长度等于 border-width 的值。

groove 定义 3D 凹槽前面板。其效果取决于 border-color 的值。

ridge 定义 3D 垄状前面板。其效果取决于 border-color 的值。

inset 定义 3D inset 前面板。其效果取决于 border-color 的值。

outset 定义 3D outset 前面板。其效果取决于 border-color 的值。

inherit 规定应该从父元素继承前面板式样。

三、示例应用

只要定义前面板不为0,即可表明前面板(但是须要定义前面板线式样),如果想要只表明下前面板就相当于把top、right、left增设为0px;下前面板不为0即可。

示例如下表所示:

标题

.show{ border-width: 0 0 1px 0; border-style: solid; border-color: black; }

只表明下前面板

表明如下表所示:

如果想要只表明右前面板只须要改border-width特性为 0 1px 0 0即可。