浅谈轮廓属性outline（1） — outline的属性介绍

浅谈轮廓属性outline（1） — outline属性介绍

浅谈轮廓属性outline（2） — outline一般使用

浅谈轮廓属性outline（3） — outline使用技巧

css outline我们平常使用都比较少，这个属性虽然跟border很大程度上看起来一样，但是其属性值还是有一定的区别的。

outline所有浏览器都支持。

border是实体的，是占位置的。

outline是虚体，不占位的。

本章就简单的介绍下outline的属性，下篇开始说一下使用方面的。

outline有以下几个属性

1、outline-width 轮廓宽度

2、outline-color 轮廓颜色

3、outline-style轮廓样式

4、inherit 父元素继承outline设置

一、outline-width 轮廓宽度

thin 细轮廓

medium 中等轮廓（默认）

thick 粗轮廓

length 自定义轮廓（数字带单位）

二、outline-color 轮廓颜色

color_name 颜色值为颜色名称（比如 red、bule）

hex_number 颜色值为十六进制值（比如 #000、#456）

rgb_number 颜色值为 rgb 代码（比如 rgb(0,66,87)）

invert 颜色反转（逆向颜色）。不同的背景颜色中可见

三、outline-style 轮廓样式

none 无轮廓（默认）

dotted 点状轮廓

dashed 虚线轮廓

solid 实线轮廓

double 双线轮廓

groove 3D凹槽轮廓

ridge 3D凸槽轮廓

inset 3D凹边轮廓

outset 3D凸边轮廓

四、inherit继承

父元素继承outline设置

outline可以缩写为：
outline:outline-color outline-style outline-width;