类别：1.扩大可点击区域2.自定义复选框3.使用阴影/模糊弱化背景4.滚动提示1.扩大可点击区域有些按钮本身的可点击区域很小。用户交互需要用CSS夸大其可点击区域。对于下图这个简单的按钮，我们希望在自身可点击区域的基础上，将可点击区域向四个方向扩大10px；扩大热区最简单的方法就是在按钮周围设置透明边框，因为鼠标在元素边框上的交互也会触发鼠标事件，这是笔触和阴影无法企及的。.btn{游标：指针；border:10pxsolidtransparent;}确实扩大了点击区域，但按钮主体也扩大了。这时候就需要使用background-clip:padding-box来裁剪背景区域；背景剪辑：填充框；如果我们用这种方式展开，就不能使用border来设置边框效果，只能用box-shadow代替来实现边框效果，但是效果并不好；因为边框会影响布局，所以我们选择用伪元素代替，达到扩大点击区域的效果；.btn::before{内容：'';位置：绝对；颜色：黑色;顶部：-10px；右：-10px；底部：-10px；left:-10px;}2.自定义复选框有些场景需要改变复选框的默认样式以显示不同的视觉效果，这就需要自定义复选框。这里只显示了一个自定义实现：Awesome!input[type="checkbox"]+label::before{内容：'\a0'；/*没有换行符*/display:inline-block;垂直对齐：.2em；宽度：.8em；高度：.8em；右边距：.2em；边界半径：.2em；背景：银色；文本缩进：.15em；行高：0.65；}input[type="checkbox"]:checked+label::before{content:'\2713';背景：黄绿色；}上面的代码是在一个checkbox后面绑定一个自定义的label标签，然后自定义效果，最后通过一定的方式隐藏前面的checkbox，但是不破坏元素，如下代码：input[type="checkbox"]{位置：绝对；clip:rect(0,0,0,0);}最后实现自定义checkbox：3.通过shadow/blur弱化背景（1）很多时候，我们需要通过一层半的透明叠加将后面的所有内容整体变暗，以突出特定的UI元素并引导用户的注意力。比如弹出层。使用伪元素实现阴影遮挡效果是比较靠谱的方案，避免了添加新的元素作为遮挡层。body.dimmed::before{位置：固定；顶部：0；右：0；底部：0；左：0；z-索引：1；background:rgba(0,0,0,.8);}缺点是显示伪类元素也需要JS操作。(2)blur所谓模糊弱化背景，就是把关键元素以外的所有东西都虚化，以配合（或替代）阴影效果，比上面的阴影弱化背景更能突出你想突出的内容.这个效果需要添加一个main元素来包裹所有的内容，然后使用模糊滤镜BaconIpsumdolorsitamet...main{transition:.6sfilter;}main:onfocus{filter:blur(5px);}由于模糊效果非常突兀，动画过度。4、滚动提示滚动条是一个常用的界面控件，用于提示元素除了可见内容之外，还包含更多内容。然而，它往往很麻烦并且视觉上很突兀，因为当用户不与可滚动元素交互时，滚动条会完全隐藏。但是这样就无法查看元素是否可滚动。参考RSS阅读器，我们让滚动区域的顶部和底部出现阴影效果，以告知用户这是一个可滚动区域。- AdaCatlace
- AlanPurring
- Schr?dingcat
- TimPurrners-Lee
- WebKitty
- Json
- Void
- Neko
- NaN
- Cat5
- 向量
ul{溢出：自动；宽度：10em；高度：8em；填充：.3em.5em；边框：1px纯银；背景：径向渐变（在顶部，rgba（0、0、0、.2），透明70%）不重复；background-size:100%15px;}这将提示用户滚动，同时保持滚动条隐藏。
