我们使用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
下面来看看代码:
.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.