十分常用HTML页面CSS样式

给做网页的时候会发现喝多常见的CSS样式用的比较多，比如鼠标经过指针手型，li产生分割线，今天整理一下碰到的比较常见的样式，以后遇到了就直接复制粘贴。

1、鼠标经过变小手：
cursor:pointer;（cursor:hand;）

2、a标签无下划线：
text-decoration:none;

3、a标签添加下划线：
text-decoration:underline;

4、a标签点击后无虚线边框：
outline:none;

5、边框圆角：
border-radius:5px;

6、table细线边框
table {border-collapse:collapse;}
td {border:1px solid #666;}

7、DIV阴影效果
.mydiv{
width:250px;
height:auto;
border:#909090 1px solid;
background:#fff;color:#333;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=3);/*ie*/
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
box-shadow:2px 2px 10px #909090;/*opera或ie9*/
}

8、背景渐变效果 (CSS3)
background: -webkit-linear-gradient(top,#ffffff 0,#e6e6e6 100%);
background: -moz-linear-gradient(top,#ffffff 0,#e6e6e6 100%);
background: -o-linear-gradient(top,#ffffff 0,#e6e6e6 100%);
background: linear-gradient(to bottom,#ffffff 0,#e6e6e6 100%);

9、按钮渐变效果
color: #444;
background: #f5f5f5;
background-repeat: repeat-x;
border: 1px solid #bbb;
background: -webkit-linear-gradient(top,#ffffff 0,#e6e6e6 100%);
background: -moz-linear-gradient(top,#ffffff 0,#e6e6e6 100%);
background: -o-linear-gradient(top,#ffffff 0,#e6e6e6 100%);
background: linear-gradient(to bottom,#ffffff 0,#e6e6e6 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#e6e6e6,GradientType=0);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;

10、背景透明及平铺
background: transparen;
background-repeat: repeat-x;

11、三角图标
border-left:18px solid transparent; //宽
border-right:18px solid transparent;
border-top:9px solid #fff; //高

12、文字超出截断（出现省略号）
overflow:hidden;
text-overflow:ellipsis; table中的td要加 white-space:nowrap;
或
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;

table里面的td超出隐藏
table{table-layout: fixed;}
table td{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

多行文本溢出显示省略号
实现方法:
display:-webkit-box; /*–课伸缩盒子/弹性盒子–*/
-webkit-box-orient:vertical;/*–从上向下垂直排列子元素–*/
-webkit-line-clamp:3;/*–限制在一个块元素显示的文本的行数(超出3行显示省略号)–*/
overflow:hidden;

13、盒子模型（横向流体布局）
<article class="warp">
<section class="sectionOne">01</section>
<section class="sectionTwo">02</section>
<section class="sectionThree">03</section>
</article>

.wrap{
width:600px;
height:200px;
display:-moz-box;
display:-webkit-box;
display:box;
}
.sectionOne{
background:orange;
-moz-box-flex:3; //（600-200）/4 *3 = 300px
-webkit-box-flex:3;
box-flex:3;
}
.sectionTwo{
background:purple;
-moz-box-flex:1; //（600-200）/4 *1 = 100px
-webkit-box-flex:1;
box-flex:1;
}
.sectionThree{
width:200px;//设置固定宽度
background:green;
}

14、设置旋转元素的几点位置
transform: rotate(45deg); //设置旋转角度
transform-origin:20% 40%; //设置旋转元素的几点位置

15、IE8兼容opacity
opacity:0.3;
filter:alpha(opacity=30);

16、文字默认超出隐藏，强制换行
word-break:break-all;

17、谷歌浏览器登录框记住密码后的背景颜色的问题
autocomplete=false 或者
<input type="email" name="email" autocomplete="off" />

18、IE浏览器使用最高版本的IE
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

19、页面文字不可被选中
html,body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}

20、描绘三角形
border-bottom: 20px inset transparent;
border-left: 20px solid #fff;
border-top: 20px inset transparent;

21、滚动条美化
::-webkit-scrollbar {
width: 15px;
} /* 这是针对缺省样式 (必须的) */

::-webkit-scrollbar-track {
background-color: #ffad00;
} /* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-thumb {
background-color: #ff8200;
} /* 滑块颜色 */

::-webkit-scrollbar-button {
background-color: #ff8200;
} /* 滑轨两头的监听按钮颜色 */

::-webkit-scrollbar-corner {
background-color: black;
} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

22、ie8兼容圆角透明度
position:relative;
background: rgba(0,0,0,.1);
-pie-background: rgba(0,0,0,.1);
behavior: url(htc/PIE.htc);

IE6-9还没发现相关的CSS属性
//IE6-9
document.body.onselectstart = document.body.ondrag = function(){
return false;
}
22、li等多个项目短线分割，记得先给li等元素relative定位，使用伪元素
li::after{
    content: "";
    position: absolute;
    height: 70%;
    width: 1px;
    background: #bfb5b5;
    right: 0;
    top: 3px;
｝
一般最后一个不横线需要可以这样处理
li:last-child::after{
    width: 0px;
}
如果需要斜线也可以添加transform: rotateZ(15deg)属性
li::after {
    content: "";
    position: absolute;
    height: 60%;
    width: 1px;
    background: rgb(193 42 42 / 30%);
    right: 0;
    top: 5px;
    transform: rotateZ(15deg);
}