选用合适的鼠标光标
css3提供了一大批内建光标()
其中某些光标很突出，因为只需要花费极少的代码，就可以迅速地提升大量网页应用的可用性。比如禁用（not-allowed），比如，公共触摸屏中隐藏光标，可以直接使用cursor:none搞定，而不需要额外的透明图片。 扩大可点击区域
将点击区域（热区）向外扩张可以提升可用性。
cursor: pointer;border: 20px solid transparent; /*使用透明边框增大热区面积，但box-shadow和outline并不能*/background-clip: padding-box; /*阻止背景扩大到边框下面*/box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset; /*模拟原有边框*/
自定义复选框
思路：使用与复选框绑定的label的伪元素模拟一个勾选框，可以自定义其样式，将原来的复选框隐藏。这种方式被称为“复选框hack”。
#awesome + 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;} 
添加选中的样式：
#awesome:checked + label::before{ content: '\2713'; /*不换行空格*/ background: yellowgreen;} 
隐藏原来的复选框：
#awesome{ position: absolute; clip: rect(0,0,0,0); /*clip只应用在已定位的元素上*/} 还可以添加聚焦的样式：
#awesome:focus + label::before{ box-shadow: 0 0 .1em .1em #58a;} 
禁用样式：
#awesome:disabled + label::before{ background: gray; box-shadow: none; color: #333;} 
开关式按钮
各种需要保持状态的UI组件，比如模态对话框、下拉菜单、标签页、跑马灯等，都可以使用上面的“复选框hack”的思路模拟，只不过开关式按钮不需要伪元素，直接把label设置为按钮的样式就可以了。
#switch{ position: absolute; clip: rect(0,0,0,0);}#switch + label { font-size: 1.5em; display: inline-block; padding: .3em .5em; background: #ccc; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .2em; box-shadow: 0 1px white inset; text-align: center; text-shadow: 0 1px 1px white;}#switch:checked + label{ box-shadow: .05em .1em .2em rgba(0,0,0, .6) inset; border-color: rgba(0,0,0,.3); background: #bbb;} 
通过阴影来弱化背景
增加一层半透明遮罩把后面的一切整体调暗，来凸显某个特定的UI元素。
方案一：
增加一个额外的HTML元素用于遮挡背景：.overlay{ position:fixed; top: 0; bottom: 0; right: 0; left:0; background: rgba(0,0,0,.8);}.lightbox{ position: absolute; z-index: 1;} 这个方法稳定可靠，但需要增加一个额外的元素。
方案二：
使用伪元素。body.dimmed::before{ position:fixed; top: 0; bottom: 0; right: 0; left:0; background: rgba(0,0,0,.8); } 这个方法移植性不好，<body>的伪元素可能被其他需要占用了。
或者，可以把遮罩交给要凸显的元素的伪元素来实现，伪元素设置z-index:-1;。
方案三：
使用box-shadow模拟遮罩。 box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
这里的扩张半径用了vmax这个单位。首先，一个固定值无法满足不同屏幕大小的情况。然后只能用视口单位来解决。1vmax相当于1vw和1vh两者中的较大值。100vw等于整个视口的宽度，100vh相当于视口的高度。
遮罩层的尺寸和视口有关，当我们滚动页面时，遮罩层就露出来了，除非给它加上
position:absolute;。所以要么页面不需要滚动，要么加固定定位。box-shadow不能捕获指针事件，而且也不能阻止鼠标和其他组件交互，只能在视觉上引导注意力。
方案四：
使用<dialog>元素及其::backdrop伪元素 dialog::backdrop{ background: rgba(0,0,0,.8);} 但是目前这个元素支持度不高。。
通过模糊来弱化背景
为了达到“景深效果”，也就是当我们的实现聚焦在较近的物体上时，远处的背景就是虚的，我们可以用之前的毛玻璃效果，但是要模糊掉除了凸显元素之外的其他所有元素，不能将虚化滤镜放在<body>元素上，因为，这样，要凸显的元素也被模糊掉了。这时，我们需要一个<mian>元素包裹住页面上除了弹出框之外的所有内容元素。当弹出一个对话框时，就给这个元素加一个类，来应用模糊滤镜。
main{ transition: filter 1s;}main.de-emphasized{ filter: blur(5px) contrast(.8) brightness(.8);}dialog{ box-shadow: 0 0 0 50vmax rgba(0,0,0, .2);/*回退方案*/} 
滚动提示
要实现滚动元素时，容器上下有淡淡的阴影提示，如：
ul{ overflow: auto; width: 10em; height: 8em; padding: .3em .5em; border: 1px solid silver; margin-right: -15px; background: linear-gradient(white 30%, rgba(255,255,255,0)), /*上面遮罩层*/ radial-gradient(at top, rgba(0,0,0, .3), transparent 70%),/*上面阴影层*/ linear-gradient(rgba(255,255,255,0) 30%, white),/*下面遮罩层*/ radial-gradient(at bottom, rgba(0,0,0, .3), transparent 70%);/*下面阴影层*/ background-attachment: local, scroll, local, scroll; /*遮罩层设为local，阴影层默认值*/ background-size: 100% 50px, 100% 15px,100% 50px, 100% 15px; background-repeat: no-repeat; background-position: top, top, bottom, bottom;} background-attachment的一个新属性local，会随内容滚动，当滑到最顶端时，上面的遮罩层遮住阴影层，滑到最底端时，下面的遮罩层遮住阴影层；在中间时，两个阴影层不会被遮住。