1. 选择合适的鼠标光标
在有一些触摸屏上我们可能需要隐藏鼠标的光标，比如说播放器的屏幕上，这种情形下隐藏鼠标光标能带来性能方面的提升。 使用cursor: none;可以达到隐藏鼠标光标的效果。
对于一些旧的浏览器可能不支持这些新的光标关键字，可以通过使用老的方式，用一张1 * 1 的透明GIF图片，然后这样做：
video {
cursor: url("transparent.gif");
}
最后我们生成隐藏鼠标光标的兼容各种情况的css代码如下：
video {
cursor: url("transparent.gif");
cursor: none;
}
2. 扩大按钮的可点击区域
可点击区域向外扩张往往也可以带来可用性的提升。没有人愿意对一个狭小的按钮尝
试点按很多次
比如把元素的热区在四个方向上各向外扩大10px，解决办法：
（1）给button增加border，代码如下：
button {
padding: 20px;
cursor: pointer;
border: 10px solid transparent;
background: #58a linear-gradient(#77a0bb, #58a);
/*
* border会同时让按钮变大
* 因为背景在默认情况下会蔓延到边框的下层
* 使用 background-clip 属性可以把背景限制在原本的区域内
*/
background-clip: padding-box;
}
效果如下：
这种解决方案并不是很好，边框会影响布局，并且有的场景并不能使用边框，另一种解决方案就是伪元素法，伪元素同样可以代替其宿主元素来响应鼠标交互。
（2）伪元素法：原理就是伪元素在四个方向都设置成比宿主大10px，基于伪元素的方法很灵活，基本上可以把热区设置为任何想要的尺寸、位置或形状，甚至可以脱离元素原有的位代码如下：
.button {
position: relative;
/*其他的样式*/
}
.button::after {
content: "";
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
}
3.自定义复选框的样式
复选框和单选框这两种控件在绝大多数浏览器中仍然是几乎或完全无法设置样式的，解决方法可以通过label元素来设置样式，然后把真正的复选框隐藏起来，代码如下：
html部分
css部分
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 13px;
height: 13px;
margin-right: 4px;
border-radius: 4px;
background: silver;
text-indent: 2px;
line-height: 13px;
}
效果如下：
还可以设置各种状态的样式，checked、focus、disabled。
4.通过模糊弱化背景将背景虚化来突出当前的文本内容
解决代码如下：
html部分
这是背景i am a dialog
css部分
.virtual-container {
width: 1000px;
height: 500px;
position: relative;
}
.main {
width: 100%;
height: 100%;
transition: .6s filter;
background: #ccc;
}
.virtual-container:hover .main {
filter: blur(2px) contrast(.8) brightness(.8);
}
.virtual-container .alert {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
background: #fff;
}
效果对比图如下：
5.交互式的图片对比控件对比两张图片的排布方式是经常出现的，为了突出图片反应的问题
比如这种的图片对比交互：
应用了一点jQuery，实现的代码如下：
html部分
css部分
.image-slider {
position:relative;
display: inline-block;
}
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%; /* 初始宽度 */
overflow: hidden; /* 让它可以裁切图片 */
}
.image-slider img {
display: block;
user-select: none;
width: 400px;
height: 400px;
}
.image-slider input {
position: absolute;
left: 0;
bottom: 10px;
margin: 0;
/*
* 增加range的大小，提升用户的体验
* 先减小它的宽度，在用变形将它放大
*/
width: 50%;
transform: scale(2);
transform-origin: left bottom;
}
js部分
var slider = $(".image-slider");
var div = document.createElement("div");
$(".before").wrap("");
var range = document.createElement("input");
range.type = "range";
range.oninput = function() {
$(".img-continer").width(this.value + "%");
};
slider.append(range);
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111824.html
摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...
摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...
摘要：现在回到我们这一章节的标题，将它做下补充关于那些事四之基于构架基础样式库基础库构思为什么要做基础库我上一章节的末尾抛出了几个问题假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义样式来满足自己的需求。 前言 先来回顾一下前几章节，我们都说了哪些内容： CSS Reset 历史 与 Normalize.css 介绍 Normalize.css...
摘要：定宽块状元素满足定宽和块状两个条件的元素是可以通过设置左右值为来实现居中的。设置方法改变块级元素的为类型设置为行内元素显示，然后使用来实现居中效果。 做前端这一年多来，其实一直都是偏向于js前后端，css什么的总是抱着够用就好的心态，从来没有系统的学习或总结过，结果现在的水平也一直停留在够用的阶段。感觉作为一名合格的前端工程师，不能让css成为自己的短板，于是简单的总结一下，高手绕路。...
阅读 1078·2021-10-11 10:57
阅读 1854·2021-09-02 15:15
阅读 1396·2019-08-30 15:56
阅读 999·2019-08-30 15:55
阅读 1033·2019-08-30 15:44
阅读 874·2019-08-29 12:20
阅读 1168·2019-08-29 11:12
阅读 958·2019-08-28 18:29
