移动端常见页面样式问题

1.iOS上input和textarea阴影

input,textarea{-webkit-appearance: none;appearance: none;}  

2.修改placeholder样式

input::-webkit-input-placeholder{color:red;}

input:focus::-webkit-input-placeholder{outline:none} //聚焦时

3.移动端头文件

4.未加滚动组件的页面,滚动不流畅问题

-webkit-overflow-scrolling: touch;

5.使用 a标签的时候,移动端长按会出现一个 菜单栏,这个时候禁止呼出菜单栏的方法如下(别人博客里看到的,未测试):

a, img { -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/ }

6.从上到下的背景渐变

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(red, blue); /* 标准的语法 */

从左到右的背景渐变

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red , blue); /* 标准的语法 */

你可能感兴趣的:(页面常见问题)