CSSCSS3常⽤的样式兼容，样式总结
这篇⽂章这篇⽂章主要介绍了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;
borderbox
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('f'), url(''); /* 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 }
取消表单元素的轮廓样式
1 input{
2 outline:none;
3 }
textarea去掉右侧滚动条，去掉右下⾓拖拽
1 textarea{
2  overflow:hidden;
3  resize:none;
4 }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。