在CSS 中常见的边框(border) 属性有以下几种:
border-style
border-width
border-color
border-top-, border-left-, border-bottom-, border-right-
border
border-style属性指定边框的样式。以下的表格列出这个属性可能有的值,以及每一个值显现出来的结果。
border-width属性是用来设定边框的宽度。可用的值为thin (薄)、medium (中等)、thick (厚),或是一个数字。
border-color属性是用来设定边宽的颜色。
我们可以将方向(top -上、bottom -下、left -左、right -右)和样式、宽度、及颜色合起来而成为一个属性。举例来说, border-top-style属性就是用来设定上边框的样式。以下举几个例子:
若四边的边框属性都一样,那我们可以用一个border属性来描述,而不必四个边都描述一次。另外,我们可以在同一行一次宣告边框样式、边框宽度、以及边框颜色。
p {
border:#0000FF 5px solid;
}
那以下的HTML,
用一行来宣布所有边框的属性
会显现出
CSS加虚线是Border-style 属性。
Border-style 属性相关定义、用法及其案例:
对浏览器的支持:所有浏览器都支持 border-style 属性。
定义和用法:
border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。
相关值及描述:
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:规定应该从父元素继承边框样式。
具体案例:
案例1
border-style:dotted solid double dashed;
//上边框是点状
//右边框是实线
//下边框是双线
//左边框是虚线
案例2
border-style:dotted solid double;
//上边框是点状
//右边框和左边框是实线
//下边框是双线
案例3
border-style:dotted solid;
//上边框和下边框是点状
//右边框和左边框是实线
案例4
border-style:dotted;
p{border-style:solid;}
默认值:not specified
继承性:no
JavaScript语法:object.style.borderStyle="dotted double"
Border-style 属性概述:
最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过,CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗,也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定,创作人员对这个决定没有任何影响。
注释说明:
A、任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit" 或 "hidden"。
B、所有标点字符均为英文状态下的字符。
border线型主要有:1、dotted【点状】2、solid【实线】 3、double【双实线】 4、dashed;【虚线】 如果一个CSS这样写:border-style:dotted solid double dashed; 出来的框就是:上边框是点状,右边框是实线,下边框是双线,左边框是虚线 如果一个CSS这样写:border-bottom:1px dashed #000000;出来的框就是:一条宽度为1像素的黑色下划虚线。 以此类推。多试试就知道什么效果了哦。
虚线下划线:border-bottom: 1px dotted #000