分享日常开发过程中遇到的常用CSS代码，看看有没有你熟悉的代码，相信这么多场景可以拯救你有时间了，建议收藏起来，说不定哪天会用到~当overscroll-behavior-x的内框滚动到border时，会触发整个页面滚动。您可以通过设置overscroll-behavior-xdiv{height:300px;来防止这种行为。宽度：500px；溢出：自动；overscroll-behavior-x:contain;}使用sroll-snap-type优化滚动在实际应用中，应用可用于全屏滚动或横幅，不需要计算各种大小的原始位置ul{scroll-snap-type:xmandatory;}li{scroll-snap-align:center;}横竖虚线css自带的虚线在某些设计场景下不够用，通过linear-gradient绘制虚线。//水平虚线.dashed{height:1px;宽度：100px；背景：线性渐变（向右，#000，#0005px，透明5px，透明）；background-size:10px100%;}//垂直虚线.dashed{background:linear-gradient(tobottom,#000,#0003.2px,transparent3.2px,transparent);背景大小：100%10px；宽度：1px；height:100px;}网格是基于linear-gradient的渐变网格，网格的角度和条纹之间的缝隙可以自己调整。background-image:linear-gradient(90deg,rgba(52,83,139,.5)50%,transparent50%),linear-gradient(rgba(52,83,139,.5)50%,transparent50%)改变输入框光标颜色caret-color:#0ff;解决IOS滚动条freezebody，html{-webkit-overflow-scrolling:touch;}hidescrollbar.box::-webkit-scrollbar{display:none;}修改webkit下的Scrollbarstyle::-webkit-scrollbar整体滚动条的一部分::-webkit-scrollbar-button滚动条两端的按钮：-webkit-scrollbar-trackOutertrack::-webkit-scrollbar-track-pieceInnerscrollarea::-webkit-scrollbar-thumbscrollingslider::-webkit-scrollbar-cornercorner::-webkit-resizer定义右下角拖动块的样式::-webkit-scrollbar{width:12px;}::-webkit-scrollbar-track{-webkit-box-shadow:inset006pxrgba(0,0,0,0.4);border-radius:10px;}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,0.1);-webkit-box-shadow:inset006pxrgba(0,0,0,0.6);}::-webkit-scrollbar-thumb:window-inactive{背景:rgba(255,0,0,0.4);}开启硬件加速，开启3D模式后开启转场。在IOS中，屏幕闪烁和冻结。可以设置开启硬件加速来解决问题。dom{backface-visibility:hidden;看法：1000;}另一个在webkit浏览器中运行良好的方法是.dom{transform:translate3d(0,0,0);}clearfloat@mixinclearfix(){&::after{content:'';显示：表格；clear:both;}}Textoverflow显示ellipsis单行文本溢出，定义省略函数调用@mixinellipsis(){overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.ellipsis{@includeellipsis();}多行文字溢出，定义多省略号函数方便调用，line为对应行号@mixinmulti-ellipsis($line:1){@if$line<=0{$line:1;}溢出：隐藏；文本溢出：省略号；显示：-webkit-box；-webkit-line-clamp：$line；-webkit-box-orient：vertical；}.ellipsis-1{@includemulti-ellipsis(1);}.ellipsis-2{@includemulti-ellipsis(2);}使用:not()解决最后一个元素特殊样式//before.navli{border-right:1pxsolid#666;}.navli:last-child{border-right:none;}//after.navli:not(:last-child){border-right:1pxsolid#666;}使列表项看起来像真正的逗号分隔列表ul>li:not(:last-child)::after{content:",";}AndroidCSS无法识别边框0.5px解决方案//buttonborder.border{position:relative;&::after{con帐篷：'';位置：绝对；宽度：200%；高度：200%；左：-50%；顶部：-50%；边框：1px实心#000；边界半径：4px；变换：比例（0.5）；框大小：边框框；}}CSS3nth-child()选择器1.选择列表中的偶数标签：nth-??child(2n)2.选择列表中的奇数标签：nth-??child(2n-1)3.从第6个选择到最后一个:nth-child(n+6)4.选择第1到6:nth-child(-n+6)5.结合两者，可以限制一定范围的选择，选择第6到9:nth-child(n+6):nth-child(-n+9)禁止文本选择*:not(input,textarea){-webkit-user-select:none;用户选择：无；-webkit-tap-highlight-color:rgba(255,0,0,0);}显示链接名称并显示当前URL
