1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>四角边框</title>
<style>
body{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.sijiaobiankuang{
width: 400px;
height: 400px;
background:
linear-gradient(to top, #306EEF, #306EEF) left top no-repeat,/*上左*/
linear-gradient(to right, #306EEF, #306EEF) left top no-repeat,/*左上*/
linear-gradient(to left, #306EEF, #306EEF) right top no-repeat,/*上右*/
linear-gradient(to bottom, #306EEF, #306EEF) right top no-repeat,/*上右*/
linear-gradient(to left, #306EEF, #306EEF) left bottom no-repeat,/*下左*/
linear-gradient(to bottom, #306EEF, #306EEF) left bottom no-repeat,/*左下*/
linear-gradient(to top, #306EEF, #306EEF) right bottom no-repeat,/*下右*/
linear-gradient(to left, #306EEF, #306EEF) right bottom no-repeat;/*右下*/
background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px;
background-color: rgba(36,56,128,0.21);
}
</style>
</head>
<body>
<div class="sijiaobiankuang">
<h1 style="text-align: center">Hello,小诸葛的博客</h1>
</div>
</body>
</html>
2、运行效果
