70. CSS3 CSS3外轮廓outline属性

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。

outline属性早在 CSS2 中就出现了，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持，在 CSS3 中对outline作了一定的扩展，在以前的基础上增加新特性。

outline 属性的基本语法如下：

outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit

从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style，而outline-width相当于border-width，只不过 CSS3 给outline属性增加了一个outline-offset属性，其取值说明如下。

例如：

我们制作双色边框效果。

HTML 代码：

<div></div>

CSS 代码：

div {
  padding: 20px;
  margin: 30px;
  outline: red solid 2px;
  border: 2px solid green;
}

效果如下：

以上关于70. CSS3 CSS3外轮廓outline属性的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。