网页常见技巧

1.css调用外部字体

@font-face { 
    font-family:方正北魏楷书简体; 
    src: url('方正北魏楷书简体.ttf'); 
}

 

2.边框忽略1px像素

 box-sizing:border-box; -moz-box-sizing:border-box;-webik-box-sizing:border-box;  

 

3.移动web在ios和android下点击元素出现阴影问题

-webkit-tap-highlight-color:rgba(255,255,255,0)

可以同时屏蔽ios和android下点击元素时出现的阴影。备注：transparent的属性值在android下无效。

-webkit-appearance:none

可以同时屏蔽输入框怪异的内阴影。

 

4.placeholder文本颜色更改

::-webkit-input-placeholder { /* WebKit browsers */
    color: #fff;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #fff;
    opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #fff;
    opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #fff;
}

 

5.页面禁止复制

moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: no

 

 6.苹果和安卓手机按钮兼容

-webkit-appearance: none;

 7.文本溢出

word-break: break-all;

或者

overflow: hidden;
text-overflow: ellipsis;