第二章 背景与边框
半透明边框
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;
}
