table css，css追加声明，body css不滚动，css 文本文字颜色，css div图片展开，css div背景颜色不显示，css3 折页效果
前两天接了一个zblog主题定制，其中分类列表中的图片都需要如上图的特效，在鼠标触发文章缩略图时候，会悬浮显示一层特效，线条动态显示，下面记录下这段HTML和CSS：
首先是HTML：
<divclass="list">
<ul>
<li>
<divclass="img">
<ahref="{$article.Url}">
<imgsrc="{yddz_thumbnail($article)"alt="{$article.Title}">
<divclass="img_active"></div>
<p>MOREEXCITING</p>
</a>
</div>
</li>
</ul>
</div>CSS：
.listli{padding-bottom:17px;width:100%;height:auto;padding-bottom:17px;margin-top:17px;border-bottom:1pxsolid#E5E5E5;overflow:hidden;}
.list.img{float:left;width:220px;height:150px;line-height:150px;background:#68838B;overflow:hidden;position:relative;}
.list.imgimg{width:100%;height:100%;object-fit:cover;overflow:hidden;}
.list.img:hoverimg{opacity:0.8;}
.list.img.img_active{width:100%;height:100%;position:absolute;top:0;left:0;
-webkit-backface-visibility:hidden;backface-visibility:hidden;
color:#fff;font-size:1.26em;text-transform:uppercase;}
.list.img.img_active::before,.list.img.img_active::after{
position:absolute;top:20px;bottom:20px;left:20px;right:20px;
content:'';opacity:0;pointer-events:none;
-webkit-transition:opacity0.35s,-webkit-transform0.35s;transition:opacity0.35s,transform0.35s;}
.list.img.img_active::before{
border-top:1pxsolid#fff;border-bottom:1pxsolid#fff;-webkit-transform:scale(0,1);transform:scale(0,1);}
.list.img.img_active::after{
border-left:1pxsolid#fff;border-right:1pxsolid#fff;-webkit-transform:scale(1,0);transform:scale(1,0);}
.list.img:hover.img_active::before,.list.img:hover.img_active::after{
-webkit-transform:scale(1);transform:scale(1);opacity:1;}
.list.imgp{display:none;position:absolute;left:0;top:0;right:0;bottom:0;text-align:center;vertical-align:middle;color:#fff;font-size:18px;}
.list.img:hoverp{display:block;}这种特效目前在网络上很多，都可以直接搜到，很多使用jquery的特效兼容性更好！