CSS/CSS3常用的样式兼容，样式总结

这篇文章这篇文章主要介绍了css中常用但是又难记的样式作为总结，方便大家学习和使用。包括了‘单行缩略号‘、’css圆角兼容'、‘元素阴影’，‘border取消宽度影响’,‘css3的背景渐变’，‘css的透明’等等

单行缩略号

1 .overhid{
2     overflow: hidden;
3     white-space:nowrap; 
4     text-overflow:ellipsis;
5 }

css圆角兼容

1 .setradius{
2     -moz-border-radius: 5px;
3     -webkit-border-radius: 5px;
4     border-radius: 5px;
5 }

元素阴影

1 .boxShadow{
2     -moz-box-shadow: 5px,5px,1px,#000;
3     -webkit-box-shadow:5px,5px,1px,#000;
4     box-shadow: 5px,5px,1px,#000;
5 }

参数：box-shadow:none | [inset x-offset y-offset blur-radius spread-radius color], [inset x-offset y-offset blur-radius spread-radius color]

none：默认值，元素没有任何阴影效果。

inset：阴影类型，可选值。如果不设置，其默认的投影方式是外阴影；如果取其唯一值“inset”，就是给元素设置内阴影。

x-offset：阴影水平偏移量，其值可以是正负值。如果取正值，则阴影在元素的右边，反之取负值，阴影在元素的左边。

y-offset：阴影垂直偏移量，其值可以是正负值。如果取正值，则阴影在元素的底部，反之取负值，阴影在元素的顶部。

blur-radius：阴影模糊半径，可选参数。其值只能是正值，如果取值为“0”时，表示阴影不具有模糊效果，如果取值越大，阴影的边缘就越模糊。

spread-radius：阴影扩展半径，可选参数。其值可以是正负值，如果取值为正值，则整个阴影都延展扩大，反之取值为负值，则整个阴影都缩小。

color：阴影颜色，可选参数，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在Webkit内核下的浏览器将无色，也就是透明，建议不要省略这个参数。

border取消宽度影响

1 .noborder{/*border 0width*/
2     -webkit-box-sizing: border-box;
3     -moz-box-sizing: border-box;
4     box-sizing: border-box;
5 }

css3的背景渐变

1 .background{
2   background:-webkit-linear-gradient(top,#FFF,#cb1919);
3   background:-o-linear-gradient(top,#FFF,#cb1919);
4   background:-ms-linear-gradient(top,#FFF,#cb1919);
5   background:-moz-linear-gradient(top,#FFF,#cb1919);
6   background:linear-gradient(top,#FFF,#cb1919);
7 }

css的透明

1 .transparent{
2     filter:alpha(opacity=50);   
3     -moz-opacity:0.5;   
4     -khtml-opacity: 0.5;   
5     opacity: 0.5;   
6 }

取消div选中蓝色背景

1 .nousel{
2     -webkit-user-select: none;  /* Chrome all / Safari all */
3     -moz-user-select: none;     /* Firefox all */
4     -ms-user-select: none;      /* IE 10+ */
5     -o-user-select: none;
6     user-select: none;
7 }

//说明：1.IE6-9不支持该属性但支持使用标签属性 onselectstart="return false;"2.直到Opera不支持该属性，支持使用私有的标签属性 unselectable="on";

css3设置字体

1 @font-face{
2     font-family: myFirstFont;
3     src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */
4 }
5 div{
6     font-family:myFirstFont;
7 }

取消移动端元素被点击高亮显示

1 .nohighlight{
2    -webkit-tap-highlight-color: transparent;
3 }

取消移动端表单元素的默认风格

1 input,textarea{
2    -webkit-appearance: none;
3 }

办公资源网址导航https://www.wode007.com

取消表单元素的轮廓样式

1 input{
2 outline:none;
3 }

textarea去掉右侧滚动条，去掉右下角拖拽

1 textarea{
2   overflow:hidden;
3   resize:none;
4 }