outline和box-shadow實作外輪廓圓角高光效果

outline的屬性和border很相似，可以實作元素高光或外輪廓透亮效果，但是沒有圓角效果，可以使用box-shadow模拟outline的圓角效果

outline定義和用法

outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

注釋：輪廓線不會占據空間，也不一定是矩形。

outline 簡寫屬性在一個聲明中設定所有的輪廓屬性。

可以按順序設定如下屬性：

• outline-color
• outline-style
• outline-width

box-shadow定義和用法

box-shadow 屬性向框添加一個或多個陰影

文法

box-shadow: h-shadow v-shadow blur spread color inset;      

注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗号分隔的陰影清單，每個陰影由 2-4 個長度值、可選的顔色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0 

值	描述
h-shadow	必需。水準陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊距離。
spread	可選。陰影的尺寸。
color	可選。陰影的顔色。請參閱 CSS 顔色值。
inset	可選。将外部陰影 (outset) 改為内部陰影。

 box-shadow模拟outline的圓角效果

實作外輪廓透明效果或高光效果還是不錯的

outline效果

.outline {
            outline: solid 10px rgba(34, 139, 34, 0.5);
        }
           

box-shadow效果

.box-shadow {
            box-shadow: 0 0 0 10px rgba(245, 0, 0, 0.5);
        }