那些不常用但很有用的css代码

css样式常见用的像width,height,float....但是也有一些样式虽然不常用，但是在搭建结构的时候用到会让页面看起来非常注重细节的出来，用户体验大大提升

1.vertical-align：像素值

像这样的图标和文字结合的div，一般图标会向上或者向下偏移2px，结构

<a class="fl_l clearfix" href="#">分享<i class="Share"></i></a>

<a class="fl_l clearfix" href="#">收藏<i class="start"></i></a>

这种情况我们就可以使用给<i>标签加上vertical-align：-2px使其与文字在同一水平上

2.<em></em>和<i></i>标签去掉默认样式斜体：      font-style: normal;

3.渐变色

.div1{
   background-image:-webkit-linear-gradient(red 25%,orange 50%);
}
.div2{
   background-image:-webkit-linear-gradient(left,red,orange);
}
.div3{
   background-image:-webkit-linear-gradient(0deg,red,orange);
}
.div4{
   background-image:-webkit-linear-gradient(45deg,red,orange);
}
.div5{
   background-image:-webkit-radial-gradient(red,orange);
}
.div6{
   background-image:-webkit-radial-gradient(top, red, orange);
}

显示效果：

4.超出文本显示为省略号

overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

显示效果：

5.表单：

input,textarea{outline:none}-----------input和textarea谷歌浏览器在获取焦点的时候去掉默认样式的蓝色边框

required---------必填

textarea样式：resize:none;----------禁止文本框放大缩小

6.鼠标

cursor：

auto：标准光标   
default：标准箭头   
hand：手形光标   
wait：等待光标   
text：I形光标   
vertical-text：水平I形光标   
no-drop：不可拖动光标   
not-allowed：无效光标   
help：?帮助光标   
all-scroll：三角方向标   
move：移动标   
crosshair：十字标