选择合适的鼠标CursorCSS3提供了大量内置的游标（cursors），其中一些脱颖而出，因为它们可以快速改进大量的web应用程序，只需要少量的代码可用性的数量。比如disable（not-allowed），比如在公共触摸屏中隐藏光标，可以直接使用cursor:none来搞定，不需要额外的透明图片。扩大可点击区域向外扩大可点击区域（热点）可以提高可用性。光标：指针；边框：20px实心透明；/*使用透明边框增加热区面积，但是box-shadow和outline不能*/background-clip:padding-box;/*防止背景扩展到边框以下*/box-shadow:0001pxrgba(0,0,0,.5)inset;/*模拟原来的边框*/自定义复选框思路：利用绑定在复选框上的标签伪元素模拟一个打勾的复选框，可以自定义其样式，隐藏原来的复选框。这种方法被称为“复选框hack”。太棒了#awesome+label::before{content:'\a0';/*没有换行符*/display:inline-block;垂直对齐：.2em；宽度：.8em；高度：.8em；右边距：.2em；边界半径：.2em；背景：银色；*text-indent:.15em;*/line-height:.65;}添加选中样式：#awesome:checked+label::before{content:'\2713';/*没有换行空格*/background:yellowgreen;}隐藏原来的复选框：#awesome{position:absolute;剪辑：矩形（0,0,0,0）；/*clip仅适用于定位元素*/}你还可以添加聚焦样式：#awesome:focus+label::before{box-shadow:00.1em.1em#58a;}禁用样式：#awesome:disabled+label::before{背景：灰色；盒子阴影：无；color:#333;}Switchbutton各种需要保持状态的UI组件，如模态对话框、下拉菜单、标签页、跑马灯等，可以使用上面的“checkboxhack”思路来模拟，但是switch类型的按钮不需要伪元素，只需将标签设置为按钮的样式即可。#switch{位置：绝对；clip:rect(0,0,0,0);}#switch+label{字体大小：1.5em;显示：内联块；填充：.3em.5em；背景：#ccc;背景图像：线性渐变（#ddd，#bbb）；border:1pxsolidrgba(0,0,0,.2);边界半径：.2em；框阴影：01px白色插图；文本对齐：居中；text-shadow:01px1pxwhite;}#switch:checked+label{box-shadow:.05em.1em.2emrgba(0,0,0,.6)inset;边框颜色：rgba(0,0,0,.3);background:#bbb;}通过阴影弱化背景添加一层半透明遮罩，将后面的所有内容整体变暗，以突出特定的UI元素。解决方案1：添加一个额外的HTML元素来覆盖背景：.overlay{position:fixed;顶部：0；底部：0；右：0；左：0；背景：rgba(0,0,0,.8);}.lightbox{位置：绝对；z-index:1;}这种方法是可靠的，但需要添加一个额外的元素。选项2：使用伪元素。body.dimmed::before{位置：固定；顶部：0；底部：0；右：0；左：0；背景：rgba(0,0,0,.8)；}该方法不可移植，伪元素可能被其他需要占用。或者，也可以通过给出要高亮的元素的伪元素来实现mask，伪元素设置为z-index:-1;。但是，这并不能保证掩码出现在该元素的后面，或者出现在该元素的父元素或祖先元素的后面。此外，伪元素不能绑定独立的JavaScript事件处理程序。方案三：使用box-shadow模拟蒙版。盒子阴影：00050vmaxrgba（0,0,0,.8）；这里的扩展半径使用vmax的单位。首先，一个固定的值不能满足不同屏幕尺寸的情况。那么就只能用视口单位来解决了。1vmax对应于1vw和1vh中的较大值。100vw相当于整个视口的宽度，100vh相当于视口的高度。这个解决方案有两个严重的问题：遮罩层的大小与视口有关。当我们滚动页面时，遮罩层会暴露出来，除非position:absolute;被添加到它。所以要么页面不需要滚动，要么增加固定定位。box-shadow不能捕捉指针事件，也不能阻止鼠标与其他组件交互，只能在视觉上引导注意力。方案四：使用
