一、边框属性:环绕在标签宽度和高度周围的线条
1、边框属性的格式
1.1、连写(同时设置四条变的边框)
border:边框的宽度 边框的样式 边框的颜色;
快捷键:bg+ border: 1px solid #000;
注意点:连写格式中颜色可以省略,省略后默认黑色;
连写格式中样式不能省略,省略后几句看不到边框了
连写格式中宽度可以省略,省略后仍能看见边框
1.2、连写(分别设置四条变的边框)
border-top:边框的宽度 边框的样式 边框的颜色;
border-bottom:边框的宽度 边框的样式 边框的颜色;
border-left:边框的宽度 边框的样式 边框的颜色;
border-right:边框的宽度 边框的样式 边框的颜色;
1.3、连写(按要素分别设置四条变的边框)
border-width:上 右 下 左
border-style:上 右 下 左
border-color:上 右 下 左
注意点:赋值顺序是上右下左;
这三个属性的取值省略规律:
1、省略左:左边的取值和右边一样
2、省略下左:左边的取值和右边一样,下边的取值和上边一样
3、省略右下左:右下左取值和上边一样
例如:
border-style:solid dotted double dashed;
1.4、非连写(方向+要素)
例如:
border-top-width:5px;
border-top-style:solid;
border-top-color: red;
小练习
<head>
<meta charset="UTF-8">
<title>小练习</title>
<style>
div{
width: 100px;
height: 100px;
}
.box1{
border: 5px solid black;
}
.box2{
border-top:5px solid red;
border-right: 5px solid green;
border-bottom: 5px solid blue;
border-left: 5px solid purple;
}
.box3{
border: 5px solid red;
border-right: 5px dashed red;
}
.box4{
border: 5px solid red;
border-style: solid dashed;
}
.box5{
border: 5px solid black;
border-bottom:none;
}
.box6{
width: 0px;
height: 0px;
border-width: 25px;
border-style: solid;
border-color: red white white white;
border-bottom:none;
}
</style>
</head>
<body>
<div class="box1"></div>
<hr>
<div class="box2"></div>
<hr>
<div class="box3"></div>
<hr>
<div class="box4"></div>
<hr>
<div class="box5"></div>
<hr>
<div class="box6"></div>
</body>