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 }