最浅显易懂的 CSS 之 边框 - 14

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

border 属性设置元素的边框以及边框的样式、颜色和宽度。

<div class="box"></div>

.box {
    width: 300px;
    height:50px;
    border: 1px solid #ff6600;
}

1. 边框样式

border-style属性指定要显示的边框类型，可选值：

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• groove - 定义 3D 坡口边框。效果取决于 border-color 值
• ridge - 定义 3D 脊线边框。效果取决于 border-color 值
• inset - 定义 3D inset 边框。效果取决于 border-color 值
• outset - 定义 3D outset 边框。效果取决于 border-color 值
• none - 定义无边框
• hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

2. 边框宽度

border-width属性指定四个边框的宽度,可以将宽度设置为特定大小（px、pt、cm、em ），border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）：

.one {
  border-style: solid;
  border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}

.two {
  border-style: solid;
  border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}

.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}

3. 边框颜色

border-color 属性用于设置四个边框的颜色,border-color 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。可以通过以下方式设置颜色：

• name - 指定颜色名，比如 "red"
• HEX - 指定十六进制值，比如 "#ff0000"
• RGB - 指定 RGB 值，比如 "rgb(255,0,0)"
• HSL - 指定 HSL 值，比如 "hsl(0, 100%, 50%)"
• transparent

注：如果未设置 border-color，则它将继承元素的颜色。

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

.two {
  border-style: solid;
  border-color: green;
}

.three {
  border-style: dotted;
  border-color: blue;
}

4. 小案例

<div class="one"></div>

div {
    width: 500px;
    height: 50px;
}

.one {
    border-color: pink;
    border-style: solid;
    border-width: 10px;
}

让我们加上圆角看看

.one {
    border-color: pink;
    border-style: solid;
    border-width: 3px;
    border-radius: 10px;
}

5. border

border 是 border-color、border-style、border-width的简写属性，位置没有固定要求，上面案例css可以简写为：

.one {
    border-radius: 10px;
    border:3px pink solid; 
}