Page 198 - css揭秘

第一个问题是比较容易解决的。我们要做的就是把它的 max-width 指
定为 100%。不过第二个问题就稍稍有些复杂。不幸的是，目前还没有任何
标准的方法可以设置这个调节手柄的样式。有些渲染引擎特别为这个需求提
供了私有的伪元素（比如 ::-webkit-resizer），但不论是在兼容性方面，
还是在样式的灵活性方面，这个方式都有着不小的局限。面对山穷水尽的局
面，我们冒出了一个大胆的想法：用一个伪元素覆盖在调节手柄之上。这
一方面可以很方便地设置样式；另一方面，即使在不加 pointer-events:
none 的情况下，这个伪元素也不会干扰调节手柄的功能。因此，一个跨浏
览器的调节手柄美化方案只需要把一个假的调节手柄覆盖在它上面。让我们
图 6-27
来试试看吧：
我们的图片滑动控件已经可以发
挥它该有的作用了，但仍然存在
.image-slider > div::before { 一些问题
content: '';
position: absolute;
bottom: 0; right: 0;
width: 12px; height: 12px;
background: white;
cursor: ew-resize;
}

请注意 cursor: ew-resize 这条声明：它提供了额外的自释性，可
以提示用户这个区域可以像调节手柄那样拖动。不过，我们不应该只依赖
鼠标光标提供唯一的自释性，因为这种自释性只有当用户与之交互时才是
可见的。
图 6-28
现在，我们的调节手柄会显示为一个白色的方块（参见图 6-28）。到了 用一个伪元素覆盖上去，可以把
这一步，我们就可以尽情地对它设置样式了。比如说，如果我们想把它设置 调节手柄美化为一个白色的方块
为一个白色三角形，并且让它跟图片的边缘保持 5px 的间隙（参见图 6-29），
就可以这样写：

padding: 5px;
background:
linear-gradient(-45deg, white 50%, transparent 0);
background-clip: content-box;

最后还有一点改进的空间。我们可以对这两张图片应用 user-select:
none，这样即使用户在没有点中调节手柄的情况下拖动鼠标，也不会误选图
片。把所有想法综合到一起，最终的代码如下所示：
图 6-29
.image-slider { 把这个假的调节手柄（实际上是个
position:relative;
display: inline-block; 伪元素）设置为一个三角形，并与
} 图片的右下角保持 5px 的间隙

.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%;
max-width: 100%;

35 交互式的图片对比控件 167

඀ࠡ JOEC