第二章 背景與邊框
半透明邊框
background-clip屬性設(shè)置為padding-box可以使背景不侵入邊框，默認(rèn)為border-box，意思是背景被邊框的外延框剪裁。多重邊框
2.1 box-shadow方案
復(fù)習(xí)一下box-shadow用法：
insert內(nèi)投影，不設(shè)為外。可選x-offset水平偏移，為正在元素右邊y-offset垂直偏移，為正在元素上邊blur-radius陰影模糊半徑 只能為正，越大越模糊。為0表示不具備陰影效果。可選spread-radius陰影擴(kuò)展半徑 為正 陰影延展擴(kuò)大。可選-
color顏色.注意：box-shadow不影響布局，多個(gè)投影之間用
,隔開.
2.2 outline方案
語法跟border一樣，可以使用虛線。使用outline-offset控制跟元素之間的邊距。
但不能設(shè)置多個(gè)，不會(huì)貼合border-radius產(chǎn)生圓角效果（未來可能會(huì)改變）。
- 背景定位
background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px
第二行為擴(kuò)展語法，它允許我們指定背景圖片距離任 意角的偏移量，只要我們?cè)谄屏壳懊嬷付P(guān)鍵字。
第一張保證回退。
如果不想設(shè)置固定值，參照下面兩個(gè)方案：
3.1 background-origin 方案
默認(rèn)情況下，background-position 是以 padding box 為準(zhǔn)的，這樣邊框才不會(huì)遮住背景圖片。因此，top left 默認(rèn)指的是 padding box 的左上 角。background-origin在默認(rèn)情況下，它的值是padding-box。如果把它的 值改成 content-box，我們?cè)?code>background-position屬性中使用的邊角關(guān)鍵字將會(huì)以內(nèi)容區(qū)的邊緣作為基準(zhǔn)（也就是說，此時(shí)背景圖片距離邊角的偏移量就跟內(nèi)邊距保持一致了）。
3.2 calc() 方案
注意要在calc() 函數(shù)內(nèi)部的- 和 + 運(yùn)算符的兩側(cè)各加一個(gè)空白符，否則會(huì)產(chǎn)生解析錯(cuò)誤！
- 邊框內(nèi)圓角
方法一：添加外層div做大背景，內(nèi)部div設(shè)置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;
}
方法二：設(shè)置outline，因?yàn)閛utline不受border-radius影響。至于outline與內(nèi)容之間的空白用box-radius填充，因?yàn)槭躡order-radius影響。擴(kuò)展半徑spread-radius的設(shè)置要比outline小，比border-radius的值當(dāng)直角等邊三角形的直角邊的斜邊大。
第四章 背景與邊框
- 平行四邊形
原理：使用transform的skew函數(shù)。并把背景，邊框等樣式應(yīng)用到偽元素上
.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函數(shù)以及scale函數(shù)，只對(duì)正方形生效。外層旋轉(zhuǎn)45度，內(nèi)層設(shè)置max-width:100%,反旋轉(zhuǎn)45度，并放大1.42
第六章 用戶體驗(yàn)
- 關(guān)于鼠標(biāo)光標(biāo)
1.1提示禁用狀態(tài)
:disabled, [disabled], [aria-disabled="true"] {
cursor: not-allowed;
}
1.2隱藏鼠標(biāo)光標(biāo)
cursor: url('transparent.gif');
cursor: none
- 擴(kuò)大可點(diǎn)擊區(qū)域
方法一：使用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;
}
