选用合适的鼠标光标
难题
鼠标指针的用途不仅在于显示鼠标在屏幕上的位置，还可以告诉用户当前可以执行什么动作。这在桌面应用程序中是十分普遍的用户体验实践，但在网页应用中却往往被忽视。
解决方案
css3 中定义了鼠标的光标，可以使用 cursor 属性来定义。
扩大可点击区域
难题
对于那些较小的、难以瞄准的控件来说，如果不能把它的视觉尺寸直接放大，将其可点击区域（热区）向外扩张往往也可以带来可用性的提升。没有人愿意对一个狭小的按钮尝试点按很多次，但实际上这样的无奈之举仍然每天都在发生。
还有一些时候，我们想让某个元素在鼠标接近窗口某侧时自动滑入，举个例子，一个自动隐藏的页头会在鼠标接近时自动从顶部滑入并完整展现，这也涉及（只在单一方向上）放大热区的问题。
解决方案
扩张热区最简单的方法是为它设置一圈透明边框，因此我们加入：
border
加入10px透明边框的按钮
但是，效果并不好，它把按钮同时加大了，原因在于背景在默认情况下会蔓延到边框的下层。简单好用的 background-clip 属性可以把背景限制在原本的区域之内：
border
如上图，这个方法很管用，然而，当需要给按钮加上真正的边框效果时，发现按钮仅有的那个边框属性已经挪作他用了，此时，可以使用内嵌投影来模拟出一道边框。
border
与 border-box 不同的是 box-shadow 可以指定多层投影，只需要使用逗号分隔即可。但如果把内嵌投影和（常规的）外部投影组合起来，将会得到一个怪异的效果，因为外部投影是绘制在 border box 外部的。
边框会影响布局，因此这种方法也不是很完美，于是放弃边框改用另一个特性来实现：伪元素同样可以代表其宿主元素来响应鼠标交互。
于是，可以在按钮的上层覆盖一层透明的伪元素，并让伪元素在四个方向都比宿主元素大出10px：
button
自定义复选框
难题
现在可以设置大多数表单控件的样式，但是单选框和复选框不在此列，极大多数浏览器中仍然是几乎或者完全无法设置样式的。
解决方案
核心：当 <label> 元素与复选框关联之后，也可以起到触发开关的作用。
初始代码：
<
接下来，需要生成一个伪元素，作为美化版的复选框，先给这个伪元素添加一些基本的样式：
input
左边是原生的复选框，右边是初步定义的复选框
现在需要给复选框的勾选状态加上不同的样式。样式可以很简单，比如换种颜色，再加上勾选标记：
input
选中后的状态
现在看来，这个伪元素俨然是一个经过简单美化的复选框了，因此需要将原生的那个复选框隐藏掉即可，但是不能使用 display:none，因为那样会把它从键盘 tab 键切换焦点的队列中完全删除。使用另一种方法来达到目的：
input
美化后将原生的复选框隐藏掉的状态
还可以进一步优化，比如在它聚焦或禁用时改变它的样式：
input
开关式按钮
开关式按钮与复选框的行为十分相似，可以用来切换某个选项的开关状态：启用时，它是被按下的状态；停用时，它就是浮起的状态。
在语义上，开关式按钮和复选框并没有本质上的差别，因此可以放心地使用这个技巧，不用担心语义上有问题。如果想用这个技巧来生成开关式按钮，其实只需要把 label 设置为按钮的样式即可，并不需要用到伪元素。
input
左边是按钮的正常状态，右边是按钮按下的状态
开关式按钮很容易与普通按钮混淆，让人误以为按下它会触发某个动作，要慎用。
通过阴影来弱化背景
难题
很多时候，我们需要通过一层半透明的遮罩层来把后面的一切整体调暗，以便凸显某个特定的 UI 元素，引导用户关注。比如，弹出层等。
通用的方法经常是增加一个额外的 HTML 元素用于遮挡背景，然后添加如下样式：
.
这个方法稳定可靠，但是需要增加一个额外的 HTML 元素，这就意味着该效果无法由单独的 CSS 实现，这不是一个严重的问题，但是对于开发者来说是一个麻烦事。
伪元素方案
可以使用伪元素来消除额外的 HTML 元素：
body
这个方法的可移植性还不够好，body 元素上可能有其他的需求占用了 ::before 伪元素，而且在使用这个方法时，还需要一点 JavaScript 来给 body 添加 dimmed 这个类。
如果把遮罩层交给这个元素自己的 ::before 伪元素来实现，就可以弥补这些不足了。给伪元素设置 z-index: -1; 就可以让它出现在元素的背后。尽管这解决了可移植性的问题，但无法对遮罩层的 Z 轴层次进行细粒度的控制。它可能会出现在这个元素之后（这是我们期望的），但也可能会出现在这个元素的父元素或祖先元素之后。
box-shadow 方案
box-shadow 的扩张参数可以把元素的投影向各个方向延伸放大。具体做法就是生成一个巨大的投影，不偏移也不模糊，简单而拙劣地模拟出遮罩层的效果：
box-shadow
这个方法在分辨率超过 2000px 就不能完全遮上，因此需要扩大投影的尺寸，因为无法分开指定水平和垂直方向上的扩张半径，所以此处最合适的视口单位是 vmax 。 1vmax 相当于 1vw 和 1vh 两者中的较大值。因此修改为如下：
box-shadow
这个技巧非常简洁易用，但它存在两个非常严重的问题：
- 遮罩层的尺寸是跟视口相关而不是跟页面相关，因此当滚动页面时，遮罩层的边缘就露出来了，除非加上 position: fixed。
- 当使用一个独立的元素（或伪元素）来实现遮罩层时，这个遮罩层不仅可以从视觉上把用户的注意力引导到关键元素上，还可以防止用户的鼠标与页面的其他部分发生交互，但是 box-shadow 并没有这种能力。
backdrop 方案
如果想引导用户关注的元素就是一个模态的 <dialog> 元素（<dialog> 元素可以由它的 showModal() 方法显示出来），那么根据浏览器的默认样式，它会自带一个遮罩层。借助 ::backdrop 伪元素，这个原生的遮罩层也是可以设置样式的，比如可以把它变得更暗一些：
dialog
要注意兼容性问题。
通过模糊来弱化背景
难题
上一节是使用半透明的遮罩层弱化页面背景，但是如果页面元素较多的情况下，只有将其调到很暗的程度才能为背景之上的文本提供足够的对比度，另外还有一种更优雅的方法，就是把关键元素之外的其他元素都模糊掉，用来配合（或取代）阴影效果。
不过，这种方法的实现难度也更高。在滤镜效果出现之前，完全是不可能完成的任务，即使是在 blur() 滤镜出现之后，这个任务依旧是非常困难的。
解决方案
需要一个额外的 HTML 元素来实现这个效果，要将页面上除了关键元素之外的其他元素都包裹起来，这样就可以只对这个容器进行模糊处理了。<main> 元素比较合适。结构代码：
<
每当弹出一个对话框，都需要给 <main> 元素增加一个类，以便对它应用模糊滤镜。
main
但是，现在这个模糊效果是突然出现的，看起来不是那么自然，反而给人一种突兀的感觉。由于 CSS 滤镜是可以设置动画的，可以让页面背景的模糊过程以过渡动画的形式来呈现。
main
如果能把这两种弱化背景的手法(阴影和模糊)结合起来，那就更好了。有一种实现方法就是使用 brightness() 和 / 或 contrast() 滤镜:
main
滚动提示
难题
当侧边栏的容器还有更多内容时，一层淡淡的阴影会出现在容器的顶部和 / 或底部。
解决方案
ul
交互式的图片对比控件
.
