前言
1.扩大可点击区域
在移动端的时候，我们往往需要增加可点击区域，比如下面这个，本身比较小，那我们如何让其可点击区域变大呢？
常用做法是增加透明边框，但如果我们吧边框用了，我们还想增加边框样式怎么办，我们就可以借用box-shadow来模边框效果，代码如下：
button {
padding: .3em .5em;
border: 100px solid transparent;
border-radius: 50%;
background: #58a;
background-clip: padding-box;
box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
color: white;
font: bold 150%/1 sans-serif;
cursor: pointer;
}
其中，默认背景会蔓延到边框的下层，所以我们需要使用background-clip控制背景裁剪区域，当然我们还可以使用伪元素来实现增加可点击区域：
button:before {
content: '';
position: absolute;
top: -10px; right: -10px;
bottom: -10px; left: -10px;chichichifansfsdf
}
2.自定义复选框
我们都知道，默认的复选框很难使用样式修改，所以我们只能使用默认样式，但是默认样式不美观，所以我们不得不寻找一些新的点子解决这个问题，其中的一个思路就是使用label标签模拟复选框行为，然后将真正的复选框隐藏掉，代码实现如下：
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
input[type="checkbox"] + 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;
}
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}
详情查看这个demo
3.遮罩层
平时我们实现遮罩层往往都是使用一个div实现的，但是我们能不能不用页面元素实现呢，于是我们又想到了伪元素，但是伪元素不能相应用户点击事件，比如用户点击遮罩层消失的效果，其实我们还可以通过box-shadow方案实现这一效果，代码如下：
.lightbox {
position: fixed;
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
}
这里的vmax指的是1vw和1vh中的较大者，而100vw则是指整个屏幕的可视宽度，所以我们的设置的值为50vmax,也就是此时阴影大小是50vw + 50vw +元素自身宽度。但是这个遮罩层不会阻止默认鼠标交互，也就是鼠标可以继续滚动页面，当页面可滚动时。
当然还有一个浏览器自带的模态框元素dialog但是目前似乎只有谷歌支持。
4.滚动条提示
在滚动的时候，当底部有内容时，则显示一个阴影部分，从而提示底部还有内容，代码如下：
ul {
overflow: auto;
background: linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px,
radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px,
linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px,
radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px;
background-repeat: no-repeat;
background-attachment: local, scroll, local, scroll;
margin-top: 30px;
}
详情可点这个demo。
交互式图片对比控件
假如我们要对比两张图片前后的异同，那会怎么实现呢，直接放上两张图片，这样似乎只能看到较大的区别的，一些细微的地方可能就很难捕捉到了，所以我们现在有以下的设计稿:
通过拖拽下三角可以显示之前与之后的图片对比。
这里我们借助于一个resize属性，这个属性不只是可以作用于textare,其他元素也是可以的，只要求它的overflow的属性值不是visible就可以，我们有以下HTML布局：
<div class="image-slider">
<div><img src="../../../../img/2018-4-16/adamcatlace-before.jpg" alt="Before" /></div>
<img src="../../../../img/2018-4-16/adamcatlace.jpg" />
</div>
css样式：
.image-slider {
position:relative;
display: inline-block;
}
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%;
max-width: 100%;
overflow: hidden;
resize: horizontal;
}
.image-slider img {
display: block;
user-select: none;
}
效果如下：
我们是可以拖拽了，但是没有按钮提示用户拖拽的按钮提示，于是我们通过伪元素实现这种效果，css代码如下：
.image-slider > div:before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: 12px; height: 12px;
padding: 5px;
background: linear-gradient(-45deg, white 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}
最终实现了这种效果，详情可点这个demo。