图片由灰变彩色的动画效果
img{width:100%;-webkit-filter: grayscale(1);filter: gray;filter: grayscale(1);transition:all 2s;}
img:hover{filter: grayscale(0);}
渐变背景
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：
<ul class="box">
<li><a href="#">人员档案维护</a></li>
<li><a href="#">人员调动</a></li>
</ul>
.box li {
height: 40px;
}
box li a {
width: 300px;
line-height: 20px;
}
<script>
$(".box li").each(function(i){
var divH = $(this).height();
var $p = $("a", $(this)).eq(0);
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
};
});
</script>
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视频
<video width="540" height="353" controls preload="auto" poster="/Content/File_Img/10003/video/Stack Mold.mp4">
<source src="/Content/File_Img/watches-supplier.com/mpg.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>
H5：
<video src="/i/movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
<video src="video/myVideo.mp4" width="640" height="480" controls preload="auto">
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
Your browser does not support the video tag.</video>
网站中添加swf文件
<embed src="/uploads/201712905/swf/samfullpacking.com.swf" width="360" height="260" type=application/x-shockwave-flash wmode="transparent" quality="high";> </embed>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ixXcfl1NfM8" frameborder="0" allowfullscreen></iframe>
10、当屏幕小于960px时
@media screen and (max-width: 960px)
11、网页title-icon
<link href="/Content/File_Img/[[SiteId]]/favicon.ico" rel="shortcut icon" type="image/x-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什么都不识别
网友评论