产品经理经常说要注重用户体验，但当我们谈及改善用户体验时，你会想到什么？
其实，有一点是很容易被开发者忽视的，那就是 CSS。我们可以使用一些 CSS 技巧来改善网页的表现形式、交互细节和可访问性。
而且这些技巧不需要花费太多时间，也不需要消耗服务器资源。你只需要花两个小时学习，然后就可以把它应用到你所有的项目中，并永远改善用户体验。
可点击区域
有时你的按钮很小，这可能导致用户无法准确点击按钮。这种现象经常发生在移动端上。如果用户点击次数太多，没有点击他们想要的按钮，或者点击错误的按钮，会让他们感到非常沮丧。
那么，如何解决这个问题呢？有些开发者可能会说：把按钮做大点。
但网页中元素的大小往往是固定的，我们不能轻易调整一个元素的大小。而且如果按钮太大，感觉很奇怪。
一个更好的解决方案是在不改变按钮原始尺寸的情况下增加其可点击区域。具体来说：我们可以使用伪元素来增加一个元素的可点击区域。
例如，这里有一个按钮：
<button id="btn">btn</button>
然后，我们可以为它添加一个伪类：
#btn::before {
content: "";
position: absolute;
top: -20px;
right: -20px;
bottom: -20px;
left: -20px;
}
js 添加按钮点击事件：
document.getElementById("btn").onclick = function () {
alert("click");
};
这时，如果我们点击按钮周围的区域，我们仍然可以触发按钮的点击事件。
平滑滚动
当页面被 # 链接滚动时，默认效果是这样的。
当然，我们也可以使用 Chrome DevTool 来检查一个元素的颜色对比。
结语
“细节决定成败”，如果你的项目有很多可以改善用户体验的细节，你就可以让用户使用你的产品时感到舒服，赢得口碑，你就有更高的成功概率。
相关文章阅读：