我们使用Visio、OmniGraffle、Process On等这些画图软件时，点击一个元素会出现几个小圆圈和一个方框，表示这个元素目前是选中的一个状态，最近项目中也要做类似的效果，就查了查相关的内容，记录下两种实现方式：
一、添加div
这种方法很好理解，就是把一个元素放在一个新的div中，同时添加8个新的div，将新的div的样式设置成小圆圈，然后用绝对定位设置在对应的位置即可，就不在这赘述，可以参考这篇博客Making a resizable div in JS is not easy as you think | by Nguyễn Việt Hưng | The happy lone guy | Medium，这篇博客也讲了如何让一个div变得可以通过拖动改变大小，讲的还是蛮清楚的（不过medium需要科学上网）。
二、纯CSS实现
在项目中其实已经实现了通过拖动改变div的大小，所以新的需求只是需要一个框选的样式，在以考虑改动最小的情况下，想了想能否有纯CSS的实现，查了下资料还真有，先来看看效果：
在线效果可以看看这个https://codepen.io/yukino_yukino/pen/abmrvKG
下面来看看代码：
<div class="box"></div>
.box {
position: relative;
width: 100px;
height: 100px;
background-color: white;
margin: 50px auto;
border: 1px solid #000;
}
.box::before {
content: "";
position: absolute;
height: calc(100% + 10px);
width: calc(100% + 10px);
top: -5px;
left: -5px;
background-image:
linear-gradient(#45aeff, #45aeff),
linear-gradient(#45aeff, #45aeff),
linear-gradient(#45aeff, #45aeff),
linear-gradient(#45aeff, #45aeff),
linear-gradient(#45aeff, #45aeff),
linear-gradient(#45aeff, #45aeff),
linear-gradient(#45aeff, #45aeff),
linear-gradient(#45aeff, #45aeff),
linear-gradient(#45aeff, #45aeff);
background-size: 10px 10px;
background-position: top left, bottom left, center left, top center, bottom center, top right, center right, bottom right;
background-repeat: no-repeat;
}
body {
background-color: #bbb;
}
原理其实很简单，就是利用border描框，利用::before (:before) - CSS（层叠样式表） | MDN伪类来的background-image描绘8个方块，然后用background-position将8个方块放置到对应位置，这里的background-image是直接使用的色块，也可以根据需要设计成圆形，亦或者可以直接使用图片。
不过这种方式有个缺陷，它无法像第一种方法那样设置指针的样式，也就是在鼠标悬浮在方块上时，不会变成可resize的样式（指针样式可参考cursor-MDN）。
参考文章：
[1]Making a resizable div in JS is not easy as you think | by Nguyễn Việt Hưng | The happy lone guy | Medium.
[2]css shapes - CSS: dots in corners of div - Stack Overflow.
[3]::before (:before) - CSS（层叠样式表） | MDN.
[4]background-image - CSS（层叠样式表） | MDN.
