css遮罩层从下往上_css揭秘-用户体验

选用合适的鼠标光标

难题

鼠标指针的用途不仅在于显示鼠标在屏幕上的位置，还可以告诉用户当前可以执行什么动作。这在桌面应用程序中是十分普遍的用户体验实践，但在网页应用中却往往被忽视。

解决方案

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

这个技巧非常简洁易用，但它存在两个非常严重的问题：

1. 遮罩层的尺寸是跟视口相关而不是跟页面相关，因此当滚动页面时，遮罩层的边缘就露出来了，除非加上 position: fixed。
2. 当使用一个独立的元素（或伪元素）来实现遮罩层时，这个遮罩层不仅可以从视觉上把用户的注意力引导到关键元素上，还可以防止用户的鼠标与页面的其他部分发生交互，但是 box-shadow 并没有这种能力。

backdrop 方案

如果想引导用户关注的元素就是一个模态的 <dialog> 元素（<dialog> 元素可以由它的 showModal() 方法显示出来），那么根据浏览器的默认样式，它会自带一个遮罩层。借助 ::backdrop 伪元素，这个原生的遮罩层也是可以设置样式的，比如可以把它变得更暗一些：

dialog

要注意兼容性问题。

通过模糊来弱化背景

难题

上一节是使用半透明的遮罩层弱化页面背景，但是如果页面元素较多的情况下，只有将其调到很暗的程度才能为背景之上的文本提供足够的对比度，另外还有一种更优雅的方法，就是把关键元素之外的其他元素都模糊掉，用来配合（或取代）阴影效果。

不过，这种方法的实现难度也更高。在滤镜效果出现之前，完全是不可能完成的任务，即使是在 blur() 滤镜出现之后，这个任务依旧是非常困难的。

解决方案

需要一个额外的 HTML 元素来实现这个效果，要将页面上除了关键元素之外的其他元素都包裹起来，这样就可以只对这个容器进行模糊处理了。<main> 元素比较合适。结构代码：

<

每当弹出一个对话框，都需要给 <main> 元素增加一个类，以便对它应用模糊滤镜。

main

但是，现在这个模糊效果是突然出现的，看起来不是那么自然，反而给人一种突兀的感觉。由于 CSS 滤镜是可以设置动画的，可以让页面背景的模糊过程以过渡动画的形式来呈现。

main 

如果能把这两种弱化背景的手法(阴影和模糊)结合起来，那就更好了。有一种实现方法就是使用 brightness() 和 / 或 contrast() 滤镜:

main

滚动提示

难题

当侧边栏的容器还有更多内容时，一层淡淡的阴影会出现在容器的顶部和 / 或底部。

解决方案

ul 

交互式的图片对比控件

.