定義和用法
-
outline（輪廓）是繪制于元素周圍的一條線退子，位于邊框邊緣的外圍岖妄，可起到突出元素的作用。
（注意：輪廓不占據(jù)空間寂祥，也不一定是矩形） - 可以按順序定義以下屬性：
outline-color: color;
outline-style: solid; /** solid dotted dashed double ... **/
outline-width: 2px;
或
outline: width style color;
問題
無法定義圓角荐虐，如圖：
Paste_Image.png
解決方法
- 在FiewFox中可以使用
outline-radius實(shí)現(xiàn)圓角輪廓，由于是firefox的私有屬性丸凭，使用是需要加上-moz-前綴福扬，即
div {
border: 2px solid #333;
border-radius: 20px;
outline: 3px solid #6099f4;
-moz-outline-radius: 23px;
}
Firefox:
Firefox 瀏覽器效果
Chome:
Chome 瀏覽器效果
- 可以使用
box-shadow達(dá)到同樣的效果，box-shadow縮寫范例如下：
box-shadow: 水平偏移 垂直偏移 模糊范圍 擴(kuò)展寬度 顏色;
添加如下樣式：
div {
margin: 100px auto;
width: 200px;
height: 130px;
border: 2px solid #333;
border-radius: 20px;
box-shadow: 0 0 0 3px #6099f4;
}
Chome 上實(shí)現(xiàn)效果：
Chome 瀏覽器效果
