实现效果——内容与边框有距离

前两天遇到一个要实现的效果：一个颜色块有边框，边框与色块有一定距离，如下：

当时第一个想法是：用一个元素包裹另一个元素，外部元素有一定宽度的padding，或内部元素有一定宽度的margin。

今天遇到一个css属性可以实现一个HTML元素实现上图效果 —— outline属性。

outline：轮廓，是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用，在元素中的位置如图：

值有：outline-color（设置轮廓的颜色），outline-style（设置轮廓的样式），outline-width（设置轮廓的宽度），inherit

实现上述效果：

方法一：outline设置轮廓，作为外边框；border设置为白色，具有一定宽度；再设置HTML元素的背景颜色；

HTML：

<div id="colorbox"></div>

CSS：

#colorbox{
		width:50px;
		height:50px;
		border:3px solid #fff;
		outline:#000 solid 1px;
		background:#000;
	}

方法二：使用 outline-offset属性 设置轮廓框架在 border 边缘外的偏移。

CSS：

#colorbox{
	width:50px;
	height:50px;
	outline:#000 solid 1px;
        outline-offset:3px;
	background:#000;
	}

补充：

outline经常会遇到的场景：去除 按钮、输入框 外部的蓝色线框。

设置：outline:none

注意：

1、Internet Explorer 不兼容 outline-offset属性

2、outline 不占用空间