选择适合的鼠标光标
禁用光标
cursor: not-allowed;
隐藏光标
cursor: url('transparent.gif');
cursor: none;
扩大可点击区域
伪元素：
button {
position: relative;
}
button::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
}
自定义复选框
自定义复选框
<input type="checkbox" id="awesome"/>
<label for="awesome">awesome</label>
input[type="checkbox"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
input[type="checkbox"] + label {
cursor: pointer;
}
input[type="checkbox"] + label::before {
content: '\a0';
display: inline-block;
vertical-align: .2em;
width: 1em;
height: 1em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
cursor: pointer;
}
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}
input[type="checkbox"]:hover + label::before {
box-shadow: 0 0 .1em .1em #58a;
}
开关式按钮
<input type="checkbox" id="awesome1"/>
<label for="awesome1">awesome</label>
#awesome1 {
position: absolute;
clip: rect(0,0,0,0);
}
#awesome1 + label {
display: inline-block;
padding: .35em .5em .2em;
background: #ccc;
background-image: linear-gradient(#ddd, #bbb);
border: 1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px white;
cursor: pointer;
}
#awesome1:checked + label,
#awesome1:active + label {
box-shadow: .04em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}
通过阴影弱化背景
遮罩层
.overlay {
position: fixed;
top: 0;
right: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .8);
}
.dialog {
position: absolute;
z-index: 1;
}
伪元素方案
.dialog::before {
content: '';
position: fixed;
top: 0;
right: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .8);
z-index: -1;
}
存在问题：
点击背景层关闭，对于这种实现起来比较麻烦
box-shadow方案
box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);
position: fixed; // 为了防止滚动页面时遮罩层弹出
存在问题：
box-shadow 只是能引起视觉上的效果 无法阻止鼠标交互（弹出层外背景中的元素仍能被点击）
backdrop方案
dialog::backdrop {
backgroud: rgba(0,0,0,.8)
}
存在问题：
浏览器不完全支持
通过模糊来弱化背景
main.de-emphasized {
filter: blur(5px);
}
模糊和阴影结合
main.de-emphasized {
filter: blur(5px) contrast(.8px) brightness(.8);
}
如果浏览器不支持，看不到任何效果，最好加上box-shadow作为浏览器回退方案。
如果还需支持鼠标在该背景区域上无法交互，使用遮罩层+filter的方式。
滚动提示
在移动端用的比较多，支持向上滚动头部显示“提示”，支持向下滚动底部显示“提示”
- Ada Catlace
- Alan Purring
- Schrödingcat
- Tim Purrners-
- Lee
- Webkitty
- json
- void
- Tim Purrners-
- Lee
- Webkitty
- json
- void
代码可参考：https://dabblet.com/gist/20205b5fcdd834461e80
交互式的图片对比控件
css Resize 方案
<div class="image-slider">
<div>
<img src="/i/l/?n=23&i=blog/3116094/202302/3116094-20230225214134054-1457803797.jpg" alter="before"/>
</div>
<img src="/i/l/?n=23&i=blog/3116094/202302/3116094-20230225214134054-1457803797.jpg" alter="after"/>
</div>
.image-slider {
position: relative;
display: inline-block;
}
.image-slider > div {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
height: 100%;
overflow: hidden;
resize: horizontal;
max-width: 100%; // 防止拉动调节手柄后超出图片大小
}
除此之外，还能通过伪元素改变调节手柄的大小
.image-slider > div::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 12px;
height: 12px;
padding: 5px;
background:
linear-gradient(-45deg, white 50%, transparent);
background-clip: content-box;
cursor: ew-resize;
}
.image-slider img {
display: block;
user-select: none; // 防止没有点击调节手柄 拖动鼠标 误选图片的情况
}
范围输入控件方案
<input type="range"/>
然后监听Input的值，动态改变第一张图片的宽度。略。
比较推荐这种方案，浏览器支持度更高，不过需要编写额外的js代码。