代码如下
<!DOCTYPE html>
<html>
<head>
<style>
.square{
border-width: 2px 2px 2px;
border-style: solid dashed dotted;
border-color: red green blue;
}
.square1{
border-width:1px 2px;
border-style:solid dashed;
border-color: red blue;
}
.square2{
border:1px solid #fff;
}
.square3{
border-width: 2px 2px 2px 2px;
border-style: solid dashed dotted solid;
border-color: red green blue pink;
}
</style>
<meta charset="utf-8">
<title>正方形边框</title>
</head>
<body>
<div class="square">
1、正方形边框[分别是上---左右---下边框设置]
</div>
<div class="square1">
2、正方形边框[分别是上下---左右边框设置]
</div>
<div class="square2">
3、正方形边框[边框的粗细、边框样式、边框颜色]
</div>
<div class="square3">
4、正方形边框[分别是上---右---左---下边框设置]
</div>
</body>
</html>
试图如下
