CSS盒子模型的边框
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型之边框</title>
<style>
div{
width: 200px;
height: 300px;
border-width: 1px;
border-color: lightcoral;
border-style: solid;
/*solid是实线,dashed是虚线,dotted是点线*/
}
/*边框综合设置:*/
/*border:四边宽度、四边样式、四边样式(这三者缺一不可)*/
</style>
</head>
<body>
</body>
</html>
2.可以把border连着写,方式如下:
div{
width:200px;
height: 200px;
border: 1px solid blue;
/*这个可以连写*/
}
3.对各条边进行设置:
div{
width:200px;
height: 200px;
border-top: 1px solid red;
border-bottom: lightcoral ;
border-left: blue;
border-right: 2px dashed greenyellow;
}