CSS常见问题解决方法

1.上下拉动滚动条时卡顿、慢

*{ -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }

2.禁止复制、选中文本

element {
	-webkit-user-select: none; -moz-user-select: none;
	khtml-user-select: none; user-select: none;
}

3.长时间按住页面出现闪退

element { -webkit-touch-callout: none; }

4.ios和android下触摸元素时出现半透明灰色遮罩

html,body{ -webkit-tap-highlight-color:rgba(255,255,255,0) }

5.iphone及ipad下输入框默认内阴影

input，textarea，select{
	-webkit-appearance: none;
	webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

6.Retina屏的1px边框

element{ border-width: thin; }

7.旋转屏幕时，字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }

8.消除IE10里面的那个叉号

input:-ms-clear{display:none;}

9.文字溢出问题（单行）

.text{  
	overflow:hidden;  
	text-overflow:ellipsis;  
	white-space:nowrap  
}

10.文字溢出问题（多行）

.text{  
	width: 250px;  
	height: auto;  
	overflow: hidden;  
	text-overflow: ellipsis;/*能够用来多行文本的状况下，用省略号“...”隐藏超出范围的文本 */  
	-webkit-line-clamp: 2;/_限制在一个块元素显示的文本的行数_/  
	display: -webkit-box;/*必须结合的属性，将对象做为弹性伸缩盒子模型显示 */  
	-webkit-box-orient: vertical;/*必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 */  
}

11.文字渐变

.text{
	background-image: -webkit-linear-gradient(top,rgba(221, 162, 74, 1), rgba(223, 184, 126, 1));/*为文本元素提供渐变背景*/
	-webkit-background-clip: text; /*用文本剪辑背景，用渐变背景做为颜色填充文本*/
	-webkit-text-fill-color: transparent;/*使用透明颜色填充文本*/
}

12.渐变背景+阴影

.btn{
  width:200px;
  height:60px;
  background: linear-gradient(to bottom right,#003655 0,#0066a1 50%,#0096ee 100%);
  border-radius:5px;
  border:1px solid #fff;
  box-shadow:0 0 15px #fff
}

13.某些Android手机圆角失效

* { background-clip: padding-box; }

14.IOS键盘字母输入，默认首字母大写

<input type="text" autocapitalize="off" />

15.去除textarea右下角三角

textarea{ resize:none }