H 24 chapter 使用偽元素 加入滑鼠移入 點擊效果
寫padding直接代替寬高的好處是 會依造字體在筐內的大小以比例調整
＊在a 連結的屬性是inline 故如果要寫入padding 必須再加入 display: inline-block;
圓角border-radius設定
如果寬高都是1:1 > 50% >正圓
如果半徑是寬高的一半> 圓角
如果有設定（行高line-height 要加上物件上下的高) /2 >圓角
使用偽元素 來遮蓋另外一個物件或內容 要考慮層級關係
.btn:before{
選擇before 白色圓圈才不會蓋到span字體
因為before會在html 的span之前
在可定位元素的狀況下 有層級關係
html 在後面的元素會去蓋掉前面的元素
故在html 上的span不被後面的元素蓋掉
content:"";
在按鈕上面加滑鼠移入白色圓形效果時
設定白色大小需注意
width: 100%;
如果高也是寫height: 100%; 這樣會是長方形 不是正方形
因為是依造外面的 a 尺寸 就不會是一比一
故要寫padding-top: 100%;
因為內距的寬度百分比是依據width的寬！
透明的白設定為 rgba(256,256,256,0.2)
.btn:hover:before{
從零到有＋轉場效果＋影藏超出範圍效果（要加在主物件內）
在.btn:before{ width & padding-top 顯示為0%
transition: all 0.2s;
在.btn:hover:before{width & padding-top 顯示為100%
滑鼠點下時會有下沉感
.btn:active{
box-sahdow: 0 3px 5px rgba(0,0,0,0.5)
}
