第二章 背景與邊框
半透明邊框
background-clip屬性設置為padding-box可以使背景不侵入邊框，默認為border-box，意思是背景被邊框的外延框剪裁。多重邊框
2.1 box-shadow方案
復習一下box-shadow用法：
insert內投影，不設為外。可選x-offset水平偏移，為正在元素右邊y-offset垂直偏移，為正在元素上邊blur-radius陰影模糊半徑 只能為正，越大越模糊。為0表示不具備陰影效果。可選spread-radius陰影擴展半徑 為正 陰影延展擴大。可選-
color顏色.注意：box-shadow不影響布局，多個投影之間用
,隔開.
2.2 outline方案
語法跟border一樣，可以使用虛線。使用outline-offset控制跟元素之間的邊距。
但不能設置多個，不會貼合border-radius產生圓角效果（未來可能會改變）。
- 背景定位
background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px
第二行為擴展語法，它允許我們指定背景圖片距離任 意角的偏移量，只要我們在偏移量前面指定關鍵字。
第一張保證回退。
如果不想設置固定值，參照下面兩個方案：
3.1 background-origin 方案
默認情況下，background-position 是以 padding box 為準的，這樣邊框才不會遮住背景圖片。因此，top left 默認指的是 padding box 的左上 角。background-origin在默認情況下，它的值是padding-box。如果把它的 值改成 content-box，我們在background-position屬性中使用的邊角關鍵字將會以內容區的邊緣作為基準（也就是說，此時背景圖片距離邊角的偏移量就跟內邊距保持一致了）。
3.2 calc() 方案
注意要在calc() 函數內部的- 和 + 運算符的兩側各加一個空白符，否則會產生解析錯誤！
- 邊框內圓角
方法一：添加外層div做大背景，內部div設置border-radius
<div class="something-meaningful">
<div>I have a nice subtle inner rounding, don't I look pretty?
</div>
</div>
.something-meaningful {
background: #655;
padding: .8em;
}
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
}
方法二：設置outline，因為outline不受border-radius影響。至于outline與內容之間的空白用box-radius填充，因為受border-radius影響。擴展半徑spread-radius的設置要比outline小，比border-radius的值當直角等邊三角形的直角邊的斜邊大。
第四章 背景與邊框
- 平行四邊形
原理：使用transform的skew函數。并把背景，邊框等樣式應用到偽元素上
.skew{
position: relative;
&::before{
position: absolute;
content: '';
top:0; left: 0; right:0; bottom:0;
z-index: -1;
transform: skew(315deg);//向右
background: #58a;
}
}
- 菱形圖片
方法一：使用transform的rotate函數以及scale函數，只對正方形生效。外層旋轉45度，內層設置max-width:100%,反旋轉45度，并放大1.42
第六章 用戶體驗
- 關于鼠標光標
1.1提示禁用狀態
:disabled, [disabled], [aria-disabled="true"] {
cursor: not-allowed;
}
1.2隱藏鼠標光標
cursor: url('transparent.gif');
cursor: none
- 擴大可點擊區域
方法一：使用border和background-clip
border: 10px solid transparent;
background-clip: padding-box;
如果需要真正的邊框，用box-shadow模擬
方法二：使用偽元素
button {
position: relative;
}
button::before {
content: '';
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
