[CSS]《CSS揭秘》第六章——用户体验
时间：2023-03-30 15:40:58
CSS
选择合适的鼠标光标#testdiv{cursor:not-allowed;/*cursor:none;//比如视频界面隐藏了鼠标*/}展开可点击区域.testdiv{width:100px;高度：40px；位置：相对；光标：移动；}.testdiv::before{内容：'';位置：绝对；顶部：-10px；左：-10px；右：10px；底部：10px；cursor:move;}使用了伪元素。自定义复选框Awesome
input[type="checkbox"]+label::before{内容：'\a0';显示：内联块；垂直对齐：.2em；//vertical-align属性设置元素的垂直对齐width:.8em;高度：.8em；保证金-权利：.2em;边界半径：.2em；背景：银色；文本缩进：.15em；//text-indent属性指定文本块中第一行文本的缩进。line-height:.65;}input[type="checkbox"]:checked+label::before{content:'\2713';背景：黄绿色；}输入[类型=“复选框”]{位置：绝对；clip:rect(0,0,0,0)//clip属性剪辑绝对定位的元素。}定义和使用
灯箱
方案二：通过添加伪元素替换多余的HTML元素方案三：box-shadow方案box-shadow:00050vmaxrgba(0,0,0,.8);*：有2个缺点：由于遮罩层的大小与视口有关，与页面无关。当我们滚动页面时，遮罩层的边缘会暴露出来，除非加上position:fixed;boxshadow没有这个能力，所以它只能在视觉上引导注意力，不能阻止鼠标交互。解决方案4：通过模糊来弱化背景main.de-emphasized{filter:blur(5px);word-wrap:break-word;}滚动tips.testdiv{margin:200px;溢出：自动；宽度：10em；高度：8em；边框：1px纯银；背景：线性渐变（白色15px，rgba（255,255,255,0）），径向渐变（在顶部，rgba（0,0,0,.2），透明70%），线性渐变（到顶部，白色15px,rgba(255,255,255,0)),radial-gradient(atbottom,rgba(0,0,0,.2),transparent70%);背景位置：00,00,100%100%,100%100%;背景大小：100%50px,100%15px,100%50px,100%15px;背景重复：不重复；background-attachment:local,scroll,local,scroll;}同理图片对比控件的CSSresize交互解决方案.testdiv{position:relative;显示：内联块；}.testdiv>div{位置：绝对；顶部：0；底部：0；左：0；宽度：50%；溢出：隐藏；调整大小：水平；最大宽度：100%；}.testdiv>div::before{内容吨：'';位置：绝对；底部：0；右：0；宽度：12px；高度：12px；填充：5px；背景：线性渐变（-45deg，白色50%，透明0）；背景剪辑：内容框；cursor:ew-resize;}.testdivimg{display:block;用户选择：无；
范围输入控件方法functionchange(){varx=document.getElementById("range").value;document.getElementById("beImg").style.width=x+"%";}#testdiv{位置：相对；显示：内联块；}#testdiv>div{位置：绝对；顶部：0；左：0；宽度：50%；溢出：隐藏；保证金：0；}#testdivimg{显示：块；用户选择：无；}#range{位置：绝对；左：0；底部：10px；宽度：50%；保证金：0；过滤器：对比度（.5）；混合混合模式：亮度；转化米：规模（2）；变换原点：左下角；}
