标签:body 全屏显示 lte hover border 背景 web position 灰度
1、垂直居中对齐
.vc{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .vc{ position:absolute; top:50%; left:50%; width:100px; height:100px; margin:-50px 0 -50px; }
2、全屏显示
html,body{ position:fixed; width:100%; height:100%; } div{ height:100%; }
3、图像灰度
img{ filter:gray; -webkit-filter:grayscale(1); }
4、背景渐变动画
.bg{ background-image:linear-gradient(#5187c4,#1c2f45); background-size:auto 200%; background-position:0 100%; transition:background-position 0.5s; } .bg:hover{ background-position:0 0; }
5、图片边框偏光
img.polaroid{ background:#000; border:solide #fff; border-width:6px 6px 20px 6px; box-shadow:1px 1px 5px #333; width:200px; height:200px;
}
标签:body 全屏显示 lte hover border 背景 web position 灰度
原文地址:https://www.cnblogs.com/ZXH-null/p/12003148.html