PC端CSS样式----笔记

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;

}