边框样式

border-style属性指定要显示的边框类型.

下面的值都是允许的:

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实心边框
• double - 定义双边框
• groove - 定义三维沟槽边框.效果取决于边框颜色的值.
• ridge - 定义三维边框.效果取决于边框颜色的值.
• inset - 定义三维嵌入边框.效果取决于边框颜色的值.
• outset - 定义3D开始边框。效果取决于边框颜色的值。
• none - 没有边框
• hidden - 隐藏边框

border-style属性可以有一个到四个值(上边框、右边框、底部边框和左边框).

注意:下面描述的其他css边框属性都不会有任何效果,除非设置了边框样式属性!

边框宽度

边框宽度属性指定四个边框的宽度.

宽度可以设置为特定的大小(px、pt、cm、em等)，也可以使用三个预定义的值之一:thin、medium或thick.

border-width属性可以有一个到四个值(上边框、右边框、底部边框和左边框).

边框颜色

border-color属性用来设置四个边框的颜色.

颜色可以通过以下方式设置:

• 名字 - 指定颜色名,例如"red"
• 十六进制 - 指定十六进制值,例如"#ff0000"
• RGB - 指定RGB值,例如"rgb(255,0,0)"
• 透明度

border-color属性可以有一到四个值(上边框,右边框,下边框和左边框).

如果border-color属性没有设置,则继承元素的颜色.

边框 - 独立设置各边框

从上面的例子中可以看出,可以为每一边指定不同的边框.

在CSS中,还有用于指定每个边框(顶部、右侧、底部和左侧)的属性:

上面的例子和下面的例子结果相同：

下面是它的工作原理:

如果border-style属性有四个值:

• border-style: dotted solid double dashed;
• 上边框是dotted
• 右边框是solid
• 下边框是double
• 左边框是dashed

如果border-style属性有三个值:

• border-style: dotted solid double;
• 上边框是dotted
• 右边框和左边框是solid
• 下边框是double

如果border-style属性有两个值:

• border-style: dotted solid;
• 上边框和下边框是dotted
• 右边框和左边框是solid

如果border-style属性有一个值:

• border-style: dotted;
• 四个边框都是dotted

border-style属性像上面的例子一样使用.但是,还可以结合border-width和border-color一起使用.

边框 - 简写属性

从上面的示例中可以看到,在处理边框时需要考虑许多属性.

要缩短代码,还可以在一个属性中指定所有单独的边框属性.

border属性是下列属性的简略属性:

• border-width
• border-style (需要的)
• border-color

所有的边框属性