<html>
<head>
<style>
.border{
background: blue;
width: 200px;
height: 200px;
box-shadow: 0 0 0 20px #655, 0 0 0 30px deeppink;
}
</style>
</head>
<body style="padding: 40px">
<div class="border">
</div>
</body>
</html>
设置两个阴影,灰色阴影的为20px,粉色阴影为30px,最终粉色边框为10px
使用阴影设置边框只能是实线的,如果需要设置其他类型的,可以通过设置outline实现,
outline是轮廓属性,是边框外围的一条线,用于突出元素(只能设置2层边框)
<html>
<head>
<style>
.border{
background: blue;
width: 200px;
height: 200px;
border: 10px dashed #655;
outline: 5px dashed deeppink;
background-clip: padding-box;
}
</style>
</head>
<body style="padding: 40px">
<div class="border">
</div>
</body>
</html>