01移动开发常用CSS
-
单行省略
scss mixin: @mixin noWrap() { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
如果在flex多列布局使用单行省略需要使用width:100% / 设置其他宽度;
-
多行省略
$lines-to-show: 行数; -webkit-line-clamp: $lines-to-show; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
-
自定义checkbox
.input { -webkit-tap-highlight-color: transparent; outline: none; } input[type="checkbox"] { width: 20px; height: 20px; border: 2px solid rgba(0, 0, 0, 0.15); border-radius: 50%; // box-sizing: border-box; appearance: none; -webkit-appearance: none; position: relative; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } input[type="checkbox"]:checked:after { content: "✓"; color: #fff; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; display: block; width: 20px; height: 20px; background: linear-gradient(270deg, #08b2ff, #2d82ff); border-radius: 100%; text-align: center; line-height: 20px; } input[type="checkbox"]:focus { outline: 0; }
-
隐藏滚动条
&::-webkit-scrollbar { width: 0 !important; }
-
文字设置渐变
background-image: linear-gradient(270deg, #fac554, #fd9248); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-
移动端字体小于 12px 解决方法 eg: 10px
font-size:12.5px; transform: scale(0.8);
-
首字选择器 eg:
::first-letter { font-size: 12.5px; }
-
在盒子里画一条1px直线
@mixin line($left,$right,$color){ height:1px; margin-left: $left; margin-right: $right; background: $color; }