outline和box-shadow实现外轮廓圆角高光效果

outline的属性和border很相似，可以实现元素高光或外轮廓透亮效果，但是没有圆角效果，可以使用box-shadow模拟outline的圆角效果

outline定义和用法

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

注释：轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：

• outline-color
• outline-style
• outline-width

 

box-shadow定义和用法

box-shadow 属性向框添加一个或多个阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0 

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

 box-shadow模拟outline的圆角效果

实现外轮廓透明效果或高光效果还是不错的

outline效果

 .outline {
            outline: solid 10px rgba(34, 139, 34, 0.5);
        }

box-shadow效果

 .box-shadow {
            box-shadow: 0 0 0 10px rgba(245, 0, 0, 0.5);
        }