盒子模型之边框（Border）

定义

CSS边框属性允许你指定一个元素边框的样式和颜色

边框样式

边框样式属性指定要显示什么样的边界

border-style属性用来定义边框的样式

border-style 值

边框宽度

您可以通过 border-width 属性为边框指定宽度

xxxxxxxxxx
.one{
    border-style:solid;
    border-width:5px;
}

边框颜色

border-color属性用于设置边框的颜色

xxxxxxxxxx
.one{
    border-style:solid;
    border-color: red;
}

温馨提示

border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式

边框单独设置各边

在CSS中，可以指定不同的侧面不同的边框

xxxxxxxxxx
p{
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    border-right: 1px solid red;
    border-left: 1px solid red;
}

边框简写属性

你也可以在一个属性中设置边框

你可以在border属性中设置

xxxxxxxxxx
border-width
border-style (required)
border-color

xxxxxxxxxx
p{
    border:5px solid red;
}

border-style属性可以有1-4个值

xxxxxxxxxx
border-style:dotted solid double dashed; // 顺序：上 右 下 左
border-style:dotted solid double; // 顺序：上 (左右) 下
border-style:dotted solid; // 顺序：上下 左右
border-style:dotted; // 顺序：所有方向

实时效果反馈

1.设置一个盒子边框为2px实线红色：

A {border:2px dotted red;}

B {border:2px solid green;}

C {border:20px solid red;}

D {border:2px solid red;}

答案

1=>D