css中的边框样式

在盒子模型中，盒子的边框是其重要的样式，通过边框我们可以很方便地看出盒子的长宽以及大小。边框的特性可以通过边框线，边框的宽度及颜色来呈现。

1，边框线

边框线指的是边框线条的样式，包括实线，虚线，点划线等。其具体的使用如下：

border-style : none | hidden | dotted | dashed | solid | double | groove |ridge | inset  | outset

例：

div { width:300px; height:100px; border-style:solid; ｝

在这里我们将一个长为300px，宽为100px的盒子设置了实线的边框，在默认的情况下边框也为实线。

我们也可以为某一个盒子设置多种不同的边框。此时要注明所要设置的边框的位置。如：border-top-style  设置上边框线

border-bottom-style  设置下边框线

border-left-style  设置左边框线

border-right-style  设置右边框线

2，宽度

设置边框的宽度可以使盒子的边框更加具有多样性，也方便了我们的观察。

border-width : medium | thin | thick | length

同边框线一样，要为一个盒子设置多个不同的边框宽度，要用到下面的语法：

border-top-width  设置上边框宽度

border-bottom-width  设置下边框宽度

border-left-width  设置左边框宽度

border-right-width  设置右边框宽度

同时边框宽度的设置可以表现出不同的效果，例：

div{ width:0; height: 0;
       border-top: 100px solid #000;
       border-right: 100px solid ransparent;
       border-left: 100px solid transparent; 

}

这里通过将盒子的宽高设置为0，并为其添加边框的宽度及颜色，从而实现了一个倒三角形图案的效果。

3，颜色

设置边框的颜色使用border-color样式：

border-color : color

例：

div{width:200px;height:200px;border-color:black;border-width:2px;}

其属性值为一表现颜色的值，即英文单词或#ffffff和grb（0~255,0~255,0~255）；其不同位置边框颜色的设置与上面的类似，在此不再赘述。

通常对于边框样式的设置我们直接使用简写的方式，即：

border : border-width || border-style || border-color

这里面的三个值依次为宽度，线型和颜色，它们的顺序可以更改。其中边框的宽度必须设置值，否则在网页中看不到效果。其它两种在不设置的情况下，取默认值，及黑色的实线。

4，圆角

圆角是CSS3中新增加的边框样式，通过它，我们可以将盒子模型的外观设置得更加多样化。其用法如下：

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

其属性值有1到4个不等，依次表示的是从左上角开始沿顺时针方向旋转的4个圆角的半径。

例：

div{ border-radius: 5px 4px 3px 2px; }

同时也可以设置每个圆角的垂直半径和水平半径，用斜杠隔开。

例：

div{ border-radius: 10px 20px 30px 40px  /  5px 10px 15px 20px; }

在这里对于圆角的半径做一下具体说明：

我们在确定了盒子模型中的一个角时，以其为中心点，向垂直方向平移的距离即为垂直半径，向水平方向的位移即为水平半径。具体的位移方向以盒子的中心方向为正。由此可以确定边框上的两个点，这两个点即为盒子圆角上弧线的起始点与终点。

5，盒子阴影

前面我们了解到文字的阴影效果，作为盒子模型自然也有其阴影效果。具体用法如下：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径]  [阴影颜色] [投影方式];

其中后四个值是可选的。通常情况下，我们也为其设置了模糊半径即阴影颜色，这样盒子模型的阴影效果更加明显。

例：

div{ box-shadow: 5px 5px　5px　 rgba(0, 0, 0, .6); }

对于其中的投影方式，一般不取值的情况下，它是指的向外投影，若对其经行取值，其值应为inset，即向内投影。

例：

div{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6) inset; }

阴影的模糊半径是表现阴影的效果的度量，其值取得越大，阴影效果表现得越明显。

６，边框图片

在css3中新增了边框的图片样式，这使得边框的表现效果更加丰富。其具体语法如下：

border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat'>

其中border-image-slice ： 是一个数值或百分比，不需要带单位（特指px）

例：

.test { border: 10px solid gray; border-image: url(test.png) 10/10px; }

通过边框图片的设置，我们可以做到更多边框的绚丽效果。