常用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支持 */