CSS改善用户体验的事情

1。选择鼠标右键在一些触摸屏上，我们可能需要隐藏鼠标光标，比如播放器屏幕。在这种情况下，隐藏鼠标光标可以带来性能提升。使用游标：无；可以达到隐藏鼠标光标的效果。对于一些旧的浏览器可能不支持这些新的光标关键字，你可以用老办法，使用一个1*1的透明GIF图像，然后这样做：video{cursor:url('transparent.gif');}最后，我们生成兼容各种情况的隐藏鼠标光标的css代码如下：video{cursor:url('transparent.gif');cursor:none;}2.扩大按钮的可点击区域向外扩大可点击区域通常也能带来易用性的提升。没有人愿意在一个小按钮上点击很多次，比如将元素的热区向四个方向各扩大10px。解决方法：（1）给按钮添加边框，代码如下：button{padding:20px;游标：指针；边框：10px实心透明；背景：#58a线性渐变（#77a0bb，#58a）；/**border会同时让按钮变大*因为背景默认会铺到border的下层*使用background-clip属性可以将背景限制在原来的区域*/background-clip:padding-box;}效果如下：这个方案不是很好，border会影响布局，有些场景不能使用border，还有一个方案是伪元素的方式，也可以响应鼠标交互而不是它的宿主元素。(2)伪元素法：原理是伪元素在四个方向都设置为比宿主大10px。基于伪元素的方法非常灵活。基本上，热区可以设置成任何想要的大小、位置或形状，甚至可以与元素分离的原始位代码如下：.button{position:relative;/*其他样式*/}.button::after{content:'';位置：绝对；顶部：-10px；右：-10px；底部：-10px；left:-10px;}3.自定义复选框的样式在大多数浏览器中，复选框和单选按钮仍然几乎或完全没有样式。解决方案可以通过label元素设置样式，然后隐藏真正的复选框，代码如下：html部分很棒的css部分input[type="checkbox"]+label::before{content:'';显示：内联块；宽度：13px；高度：13px；右边距：4px；边界半径：4px；背景：银色；文本缩进：2px；line-height:13px;}效果如下：还可以设置各种状态的样式，checked，focus，disabled。4.通过模糊和弱化背景来突出当前文本内容。解决代码如下：html部分Thisisthebackground