边框想实现多重的层次效果,可以利用css中的 box-shadow 属性实现。下面这个例子,每一层颜色从内向外变浅,宽度均为5px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.div{
width: 400px;
height: 400px;
margin: 50px;
box-shadow: 0 0 0 5px #191970, 0 0 0 10px #00008B, 0 0 0 15px #0000CD,0 0 0 20px #4169E1;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>
实现的效果如下: