解决问题:outline选中后轮廓设置为非矩形

以下解决方案均参考一下连接,写的比我详细,建议参考。

参考链接:https://www.zhangxinxu.com/wordpress/2015/04/css3-radius-outline/

实现效果:

 一开始的思路是使用outline,选中后高亮显示,可以设置颜色,宽度,轮廓,而且提示这个轮廓不一定就是矩形,如下提示

定义和用法
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

注释:轮廓线不会占据空间,也不一定是矩形

但是并没有找到这种设置的方法,有的只是火狐支持。

最终改用boxShadow也就是盒子阴影的方式来实现,具体实现如下:

document.getElementById('myId').style.boxShadow = '0 0 0 3px blue'

我是动态添加属性啊,有些可以直接设置的如下

<div style="box-shadow:0 0 0 3px blue"></div>

现在咱们详细看一下boxShadow具体有哪些属性

box-shadow:h-shadow v-shadow bule spread color inset

具体含义如下

h-shadow:必写 水平阴影的位置
v-shadow: 必写 垂直阴影的位置
blur:可选 阴影模糊的距离
spread:可选 阴影尺寸
color:可选 颜色
inset:可选 将外部阴影改为内部阴影
原文地址:https://www.cnblogs.com/qcq0703/p/14450674.html