實現效果——內容與邊框有距離

前兩天遇到一個要實現的效果：一個顏色塊有邊框，邊框與色塊有一定距離，如下：

當時第一個想法是：用一個元素包裹另一個元素，外部元素有一定寬度的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 不佔用空間