一. 盒子模型组成
二. border
1. 边框,三部分 粗细,样式和颜色
border: border-width (px) || border-style || border-color
<style>
div {
width: 300px;
height: 200px;
/* 边框粗细 */
border-width: 5px;
border-style: solid;
}
</style>
</head>
<body>
<div></div>
2.复合写法
<style>
div {
width: 300px;
height: 200px;
/* border-width: 5px;
border-style: solid; */
border: 5px solid pink;
}
</style>
3.边框可以分开写
<style>
div {
width: 300px;
height: 200px;
border-top: 5px solid pink;
border-bottom: 5px solid pink;
border-left: 5px dotted skyblue;
border-right: 5px dashed skyblue;
}
</style>
4.运用层叠性
<style>
div {
width: 300px;
height: 200px;
border: 5px dashed skyblue;
border-top: 5px solid pink;
}
</style>
反过来不行,有就近原则
<style>
div {
width: 300px;
height: 200px;
border-top: 5px solid pink;
border: 5px dashed skyblue;
}
</style>