CSS outline輪廓

admin發表於2018-07-28
CSS
輪廓（outline）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。

outline屬性規定元素輪廓的樣式、顏色和寬度。

它是個複合屬性，後面可以跟多個值，也可以只跟一個值。

程式碼片段演示: 

[CSS] 純文字檢視 複製程式碼
outline:#000 dotted thick;

上面程式碼依次定義了輪廓的顏色、樣式和寬度。

複合屬性分解介紹如下:

一.outline-color屬性:

此屬性用來規定輪廓的顏色。

二.outline-style屬性:

此屬性用來規定輪廓的風格。

三.outline-width屬性:

此屬性用來規定輪廓的寬度。

程式碼例項: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.antzone{
  width:150px;
  border:5px solid red;
  outline-width:5px;
  outline-style:solid;
  outline-color:green
}
</style>
</head>
<body>
<div class="antzone">螞蟻部落</div>
</body>
</html>

從上面的程式碼可以看出，輪廓位於元素邊框的外層。 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.antzone{
  width:150px;
  outline-width:10px;
  outline-style:solid;
  outline-color:green
}
</style>
</head>
<body>
<div class="antzone">螞蟻部落一</div>
<span>螞蟻部落二</span>
</body>
</html>

outline只是一個"虛胖"，並不會真正擴充套件佔據的空間，這一點和border是有區別的。

相關文章