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);
        }

outline和box-shadow实现外轮廓圆角高光效果_第1张图片

你可能感兴趣的:(前端开发,个人笔记,outline圆角,box-shadow)