CSS 邊框與外輪廓的異同點(diǎn)

提問(wèn)人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-18

在CSS樣式中，邊框（border)與輪廓（outline )從頁(yè)面顯示上看起來(lái)幾乎一樣，但是它們之間的區(qū)別還是很大的。

相同點(diǎn)如下：

?都是圍繞在元素外圍顯示。

?都可以設(shè)置寬度、樣式和顏色屬性。

?在寫法上也都可以采用簡(jiǎn)寫格式（即把三個(gè)屬性值寫在一個(gè)屬性當(dāng)中）。

不同點(diǎn)如下：

?outline是不占空間的，不會(huì)增加額外的width或者h(yuǎn)eight,而border會(huì)增加盒子的寬度和高度。

?outline不能進(jìn)行上、下、左、右單獨(dú)設(shè)置，而border可以。

?border可應(yīng)用于幾乎所有有形的HTML元素，而outline應(yīng)用于鏈接、表單控件、lmageMap等元素。

?outline的效果將隨元素的focus而自動(dòng)出現(xiàn)，相應(yīng)地隨blur而自動(dòng)消失。

?當(dāng)outline和border同時(shí)存在時(shí)，outline會(huì)圍繞在border的外圍。

【例題】比較邊框與外輪廓

代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

.div1{

width: 200px;

height: 200px;

margin:20px auto;

border-width:20px 10px 15px 5px;

border-color: red green yellow blue;

border-style: solid dashed dotted;

outline-width: 20px ;

outline-style:solid ;

outline-color:pink ;

}

</style>

</head>

<body>

</body>

</html>

相關(guān)視頻回答

回復(fù)(0)