图片由灰变彩色的动画效果
img{width:100%;-webkit-filter: grayscale(1);filter: gray;filter: grayscale(1);transition:all 2s;}
img:hover{filter: grayscale(0);}
渐变背景
exmekmotor.com
225595
3e92f9
background: -ms-linear-gradient(top, #225595, #3e92f9);
background: -moz-linear-gradient(top, #225595, #3e92f9);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#225595), to(#3e92f9));
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#225595), to(#3e92f9));
background: -o-linear-gradient(top, #225595, #3e92f9);
移动端列表border-bottom 0.5px效果：
border: none;
background-color: #fff;
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: 0 bottom;
background-image: linear-gradient(0,#dddddd,#dddddd 50%,transparent 50%);
background-image: -webkit-linear-gradient(90deg,#dddddd,#dddddd 50%,transparent 50%);
2、鼠标经过图片缓慢放大
div img{ transition: all 0.6s;}
div img:hover { transform: scale(1.4);}
3、input placeholder文字颜色样式更改
.m-top-search input::-webkit-input-placeholder,
.m-top-search input::-moz-placeholder,
.m-top-search input::-ms-input-placeholder {
color: #fff;
}
3、文本左右全对齐
text-align:justify;
text-align-last:justify;
5、多行文本溢出显示省略号
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
兼容IE8：
人员档案维护
人员调动
.box li {
height: 40px;
}
box li a {
width: 300px;
line-height: 20px;
}
6、浏览器没有的字体
@font-face{
font-family:ch;
/为引入的字体命名/
src:url(../font/FZZCHJW.TTF);
/定义要引入字体文件的路径/
}
*{ font-family: ch;}
7、文本区域背景裁剪
text{ color: transparent; -webkit-background-clip: text;}
8、filter:Alpha(opacity=80);
opacity:0.85;filter:alpha(opacity=85);
9、table td border重叠部分合并
table tr td { border: 1px solid #ddd; border-collapse: collapse; display: table-cell;}
table tr { border-collapse: collapse; display: table-row;}
table { border-collapse: collapse; display: table;}
table换行问题
table td {table-layout: fixed;border-collapse: collapse; word-break: break-all;}
firefox td背景色将border覆盖问题
th { background-clip: padding-box!important; }
10、小箭头
.sidebar3 a:before { content: ''; border-left: 5px solid #333; border-right: 5px solid transparent; border-top: 5px solid transparent; border-bottom: 5px solid transparent; position: absolute; left: 150px; top: 18px; z-index: 99999;}
2、网站中添加mp4视频
tooling-injection.com
Your browser does not support the video tag.
H5：
Your browser does not support the video tag.
Your browser does not support the video tag.
网站中添加swf文件
10、当屏幕小于960px时
@media screen and (max-width: 960px)
11、网页title-icon
12、文本垂直排列
writing-mode: tb-rl
13、清除浮动
.clearfix:after { content:""; display: block; clear:both; }
三、CSS hack写法
书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。
color:red;//所有浏览器
color:blue\9;//所有IE
+color:orange;//IE7
_color:green;//IE6
若浏览器为FireFox，那么color:red；若浏览器为IE8，根据CSS优先性原则，color:blue；若为IE7，color:orange；若为IE6，则color:green。
IE6识别 * 、_
IE7识别 * 、+
IE8识别 * 、\9,\0
只有IE8识别 \0/
ie9只识别：\9
FF什么都不识别