前端常用的CSS代码块

总结分享一下


1、自定义文本选择

1. <font color="#000000" style="background-color: white;">::selection { background: #e2eae2; }
   
2. </font>

复制代码

2、图片边框偏光

1. <font color="#000000" style="background-color: white;">img.polaroid {
   
2.     background:#000;
   
3.     border:solid #fff;
   
4.     border-width:6px 6px 20px 6px;
   
5.     box-shadow:1px 1px 5px #333;
   
6.     -webkit-box-shadow:1px 1px 5px #333;
   
7.     -moz-box-shadow:1px 1px 5px #333;
   
8.     height:200px;
   
9.     width:200px;  
   
10. }</font>

复制代码

3、锚链接伪类

1. <font color="#000000" style="background-color: white;">a:link { color: blue; }
   
2. a:visited { color: purple; }
   
3. a:hover { color: red; }
   
4. a:active { color: yellow; }</font>

复制代码

4、全屏背景图

1. <font color="#000000" style="background-color: white;">html {
   
2.     background: url('bg.jpg') no-repeat center center fixed;
   
3.     background-size: cover;
   
4. }</font>

复制代码

5、内容垂直居中

1. <font color="#000000" style="background-color: white;">.center {
   
2.     min-height: 6.5em;
   
3.     display: table-cell;
   
4.     vertical-align: middle;
   
5. }</font>

复制代码