目录：1、扩充可点击区域2、自定义复选框3、通过暗影/含糊来弱化背景4、滚动提醒1、扩充可点击区域
有些按钮自身的可点击区域是很小的，为了用户交互须要用CSS夸张其可点击区域。
如下所示的简略按钮，咱们想在其自身可点击区域的根底上，让其可点击区域在四个方向上向外扩充10px；
扩充热区最简略的办法是在按钮四周设置一圈通明边框，因为鼠标对元素边框的交互也会触发鼠标事件，这一点是描边和投影所不迭的。
.btn { cursor: pointer; border: 10px solid transparent;}
的确扩张了点击区域，但按钮本体也被扩张，这时须要用background-clip：padding-box让背景区域被裁开；background-clip: padding-box;
应用这种形式进行扩张的话，咱们就无奈用border再设置边框成果，只能用box-shadow代替实现边框成果，但其成果不佳；
因为border会影响布局，所以咱们抉择替换用伪元素实现扩张点击区域的成果；
.btn::before { content: ''; position: absolute; color: black; top: -10px; right: -10px; bottom: -10px; left: -10px;}2、自定义复选框
有些场景须要扭转复选框的默认款式，让其展示不同的视觉效果，这就须要自定义复选框。
这里只展现一种自定义的实现形式：
<input type="checkbox" id="awesome" /><label for="awesome">Awesome!</label>input[type="checkbox"] + label::before { content: '\a0'; /* 不换行空格 */ display: inline-block; vertical-align: .2em; width: .8em; height: .8em; margin-right: .2em; border-radius: .2em; background: silver; text-indent: .15em; line-height: .65; }input[type="checkbox"]:checked+label::before { content: '\2713'; background: yellowgreen;}下面的代码就是让一个自定义的label标签绑定在一个checkbox前面，而后自定义成果，最初把后面的checkbox用肯定形式暗藏，但不销毁元素，如上面代码：
input[type="checkbox"] { position: absolute; clip: rect(0,0,0,0);}最初实现了自定义的checkbox：
3、通过暗影/含糊来弱化背景
（1）暗影
很多时候，咱们须要通过一层半透明的遮罩层来把前面的所有整体调
暗，以便凸显某个特定的 UI 元素，疏导用户关注。比方，弹出层。
应用伪元素实现暗影遮挡成果是比拟靠谱的计划，防止了新加元素作为遮挡层。
body.dimmed::before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: rgba(0,0,0,.8);}毛病是还须要进行JS操作，将伪类元素进行展现。
（2）含糊
所谓的含糊弱化背景，就是把要害元素之外的所有都含糊掉，用来配合（或取代）暗影成果，比下面暗影弱化背景更能突出想突出的内容。
这种成果须要加一个main元素把所有内容都包裹起来，再应用含糊滤镜
<main>Bacon Ipsum dolor sit amet...</main> <dialog> O HAI, I'm a dialog. Click on me to dismiss. </dialog>main { transition: .6s filter;}main:onfocus { filter: blur(5px);}因为这样含糊成果进去是很突兀的，所以给它加上动画成果适度。
4、滚动提醒
滚动条是一种常见的界面控件，用来提醒一个元素除了能够看到的内容之外，还蕴含了更多内容。然而，它往往太过轻便，在视觉上喧宾夺主，因当用户不与可滚动的元素交互时，滚动条就会被齐全暗藏。然而这样就无奈看出元素是否能够滚动。
咱们参照一种RSS阅读器，让可滚动区域的高低浮现一种暗影成果，告知用户这是可滚动的区域。
<ul> <li>Ada Catlace</li> <li>Alan Purring</li> <li>Schrödingcat</li> <li>Tim Purrners-Lee</li> <li>WebKitty</li> <li>Json</li> <li>Void</li> <li>Neko</li> <li>NaN</li> <li>Cat5</li> <li>Vector</li></ul>ul { overflow: auto; width: 10em; height: 8em; padding: .3em .5em; border: 1px solid silver; background: radial-gradient(at top, rgba(0, 0, 0, .2), transparent 70%) no-repeat; background-size: 100% 15px;}这样在放弃暗藏滚动条的同时也能提醒用户滚动区域。