盒子模型—边框:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型-边框</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
border-width可以用来指定四个方向的边框的宽度
值情况:
四个值:上 右 下 左
三个值:上 左右 下
两个值:上下 左右
一个值:上下左右
border-xxx-width
top right bottom left
color syle类似
border-width: 10px(上) 20px(右) 30px(下) 40px(左);
*/
border-width: 10px;
border-color: red;
/*
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
默认值:none
*/
border-style: solid;
/*
border简写属性,通过该属性可以同时设置边框所有的相关样式,并且没有顺序限制
borer-top,border-right,border-bottom,border-left
*/
border: solid 10px orange;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>