常用CSS

/**************** CSS3 ******************/

/**** 兼容性  ***/

/* Firefox 4 */                    -moz-

/* Safari and Chrome */   -webkit-

/* Opera */                       -o-



@font-face{  /*  设置字体  */

    font-family: myFirstFont;

    src: url('fonts/glyphicons-halflings-regular.ttf'),

           url('fonts/glyphicons-halflings-regular.eot'); /* IE9+ */

}

#d4{ /* 调用字体 */

    font-family:myFirstFont;

}



border-radius:25px;                                        /* 圆角 */

border-radius: 0 3px 3px 0;                           /* 圆角 */

box-shadow: 10px 10px 15px #888888;       /* DIV P 什么的阴影 左 上 发光大小 颜色*/

text-shadow: 10px 10px 5px #FF0000;         /* 字体发光 */

transition: width 1s linear 2s;                        /* 动画宽(背景什么的都可以)用1S来完成,延迟2S运行 */



/*   伪元素  */

div::after { //在DIV里最后面插入内容

  content: "你好";

}

div::before { //在DIV里最前面插入内容

  content: "你好";

}


-webkit-appearance:none                /* select 下拉菜单 去掉右侧三角箭头 */

word-break: break-all;                      /* 英语自动换行*/

word-wrap: break-word;

         

white-space: nowrap;                       /* 文本不换行 */

text-overflow: ellipsis;                      /* 文本超出一三个点显示 */

overflow: hidden;                             /* 超出隐藏 */

/****************多行垂直居中******************/

display: table-cell;

height: 73px;

vertical-align: middle;


/****************滚动条******************/

scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/

scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/

scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜色*/

scrollbar-highlight-color: #666; /*图2,滚动条空白部分的颜色*/

scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜色*/

scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴影的颜色*/

scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/


/****************不常用样式******************/

letter-spacing:20px;/*字与字间距*/

text-indent:50px;/*首字母缩进*/

word-spacing:300px;/*数字、单词、汉字之间的间距!*/


/****************鼠标样式******************/

Cursor:url(mouse.cur); /*自定义个性鼠标*/


/****************背景固定******************/

background-attachment: fixed;


/****************单位使用******************/

height: 100vh;  /* 窗口高度 */

height: 100rem;  /* 根据HTML字体大小进行设置 比如:HTML字体设置20px  1rem 那就是20px  100rem就是2000px*/


/****************兼容性******************/

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->

<!--[if IE]> 所有的IE可识别 <![endif]-->

<!--[if IE 6]> 仅IE6 <![endif]-->

<!--[if lt IE 6]> IE6以及IE6以下 <![endif]-->

<!--[if gte IE 6]> IE6以及IE6以上 <![endif]-->

<!--[if IE 7]> 仅IE7 <![endif]-->

<!--[if lt IE 7]> IE7以及IE7以下<![endif]-->

<!--[if gte IE 7]> IE7以及IE7以上 <![endif]-->

<!--[if IE 8]> 仅IE8 <![endif]-->

<!--[if IE 9]> 仅IE9 <![endif]--> 

background: red;              /* 所有浏览器*/

background: black!important;   /* 有ie7,ie8,ie9,firefox,chrome支持 */

_background: yellow;           /* 只有ie6支持 */

+background:yellow;            /* 只有ie6,ie7支持 */

*+background:yellow;           /* 只有ie6,ie7支持 */

*background:black;             /* 只有ie6,ie7支持 */

background:yellow\9;           /* 有ie6,ie7,ie8,ie9支持 */

background:black\0;            /* 有ie8,ie9支持 */


(1)