需要了解的幾個css屬性：
1.hsla
H是色度，取值在0度~360度之間，0度是紅色，120度是綠色，240度是藍色。360度也是紅色。
S是飽和度，是色彩的純度，是一個百分比的值，取值在0%~100%，0%飽和度最低，100%飽和度最高
L是亮度，也是一個百分比值，取值在0%~100%，0%最暗，100%最亮。
A是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明。
以上摘自博客 https://www.cnblogs.com/zhoushengxiu/p/5710691.html
2.background-clip
background-clip規定背景的繪制區域，其值包括border-box，padding-box，content-box，no-clip。參數分別表示從邊框、或內填充，或者內容區域向外裁剪背景。no-clip表示不裁切，和參數border-box顯示同樣的效果。
以上摘自w3school和慕課網。
根據以上的信息，我們可以了解到，半透明框的原理即是設定一個半透明的邊框，然后運用background-clip的padding-box使背景從內填充開始裁減。
code：
border: 10px solid hsla(0, 0%, 100%, .5);
background: red;
background-clip: padding-box;
效果：
