CSS非常规样式设置记录
2019年11月12日
1、Android和IOS文本垂直居中
Android使用height和line-height相等的方法,会在各种机型产生不同的效果,很多机型不能居中,IOS没问题
解决办法:
不设置元素的高度,设置上下相同的padding值即可
2、隐藏滚动条
给元素添加伪元素,比如:
.container::-webkit-scrollbar { width: 0px; }
3、混合开发APP,屏幕有滚动效果时,IOS端卡顿
-webkit-overflow-scrolling: touch;
4、flex布局,设置每个子项目间距相同,导致最后一行子项目数量小于之前的行时,间距大了的问题
如下图所示:
解决方法:给伸缩容器元素添加伪类,伪类的内容为空,宽度等于伸缩子项目
.flex_container:after { content: ""; width: 1.87rem; }
5、去除<input type=”number”>时输入框右侧的上下箭头
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz-appearance: textfield; }
6、确保所有浏览器下<button>按钮高度一致
<button id="btn"></button> <label for="btn">按钮</label> button { position: absolute; clip: rect(0 0 0 0); } label { display: inline-block; line-height: 20px; padding: 10px; }
7、一个元素的背景对半显示两个颜色
background: linear-gradient(black 50%, white 50%);
8、border绘制三角形
<div></div> div { border: 50px solid; border-color: #000 transparent transparent; }
效果: