CSS笔记14-边框

元素的边框是围绕元素内容和内边距的一条或多线线

 

边框的样式

使用border-style属性定义边框的样式，样式控制着边框的显示，如果没有样式，将根本没有边框

可以为边框定义多个样式，例如

p {
    border-style:solid dotted dashed double;
}

上面这条规则为段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

同样也可以只对某一条边框进行定义

p {
    border-top-style: solid;
    border-right-style: dotted;
    border-bottom-style: dashed;
    border-left-style: double;
}

这样和使用border-style效果是一样的

 

 

边框的宽度

可以使用border-width属性来设置边框的宽度，可以使用数值指定长度，也可以使用三个关键字之一：thin、medium（默认值）和thick

所以可以这样设置四条边框的宽度

p {
    border-style:solid dotted dashed double;
    border-width: 5px;
}

或者

p {
    border-style:solid dotted dashed double;
    border-width: thick;
}

当然也可以定义单个边框的宽度

p {
    border-style: solid;
    border-top-width: thick;
    border-right-width: 10px;
    border-bottom-width: 0.25em;
    border-left-width: 10ex;
}

 

 

边框的颜色

使用border-color属性可以设置边框颜色,可以使用命名颜色，rgb或十六进制

p {
    border-style: solid;
    border-color:blue rgb(35%,25%,45%) #909090 red
}

同样也可以只对单边进行设置

p {
    border-style: solid;
    border-top-color: blue;
    border-right-color: rgb(35%,25%,45%);
    border-bottom-color: #909090;
    border-left-color: red;
}