最近闲暇时间在看鑫爷的《CSS世界》，内容真的是非常精彩，很多细节分析的非常透彻，值得推荐。在日常开发中实现某种效果有很多方式，但是下面的css code我以前都很少用到，原来css还可以这么玩 。

实现hover改变成另一张图片效果

/**css**/img: hover { 　
     content: url( laugh-tear. png);
 }/**html code**/

局限性：content 属性 改变 的 仅仅是 视觉 呈现， 当 我们 以 右键 或 其他 形式 保存 这张 图片 的 时候， 所 保存 的 还是 原来 src 对应 的 图片。

显示网站logo

logo h1>
 h1 { 　 
   content: url( logo. svg);
 }

优点：
1，不会影响网站SEO。
2，使用.svg矢量图为了适应移动 端 retina 屏幕（如果用.svg会模
糊）。
注：千万不要自以为是地把重要的文本信息使用content 属性生成，因为这对可访问性和SEO都很不友好，content 属性只能用来生成 一些 无关紧要的内容， 如装饰性图形或者序号之类； 同样，也不要担心 原本重要的文字信息会被content替换，替换的仅仅是视觉层。

设置内容无法选中、无法复制

  user-select: none

“三道 杠” 小 图标 示意

image.png

.icon-menu { 　     display: inline-block; 　     width: 140px; 
     height: 10px; 　     padding: 35px 0; 　     border-top: 10px solid; 　     border-bottom: 10px solid; 　     background-color: currentColor; 　     background-clip: content-box; 
}

双层 圆点 图形 示意

image.png

.icon-dot { 　     display: inline-block; 　 
      width: 100px; 
      height: 100px; 　 
      padding: 10px; 　      border: 10px solid; 　 　 　 
      border-radius: 50%; 　 
      background-color: currentColor; 　 
      background-clip: content-box; 
}

去掉最右边的margin-right：20

image.png

  /**方案一：使用css3 nth-of-type属性（不考虑兼容IE8**/li: nth-of-type(3n) { 
　 margin-right: 0;
 }

  /**方案二：通过给父容器添加margin属性， 增加容器的可用宽度来实现**/ul { 　     margin-right: -20px; 
} ul > li { 　     float: left; 　     width: 100px; 　 
     margin-right: 20px;
 }

margin：auto的妙用

水平垂直居中

image.png

html>
    
    
    
    

        

    

左／右对齐效果。

image.png

...        .father {            width: 300px;            height: 200px;            border: red solid 1px;
        }        .son {            width: 100px;            height: 100px;            background-color: orange;            margin-right: 50px; /**左对齐margin-right、margin-left值交换**/
            margin-left: auto;  /**key code here**/
        }
...

水平居中

image.png

...        .father {            width: 300px;            height: 200px;            border: red solid 1px;
        }        .son {            width: 100px;            height: 100px;            background-color: orange;            margin-right: auto; /**key code here**/
            margin-left: auto;  /**key code here**/
        }
...

垂直居中

image.png

...        .father {            width: 300px;            height: 200px;            writing-mode: vertical-lr;  /**key code here**/
            border: red solid 1px;
        }        .son {            width: 100px;            height: 100px;            background-color: orange;            margin: auto;  /**key code here**/
        }
...

实现最高渲染性能的去除下边框css

div { 　 
    border: 1px solid; 　 
    border-bottom: 0 none;  /**key code here**/
 }

优雅的增加icon按钮点击区域

点击 区域 大小 从 16 × 16 一下子 提升 到 38 × 38，

image.png

.icon- clear { 　     width: 16px; 　 
      height: 16px; 　 
      border: 11px solid transparent; 　 /**key code here**/}

最高性能等边三角图形绘制

image.png

 div {      width: 0;      border: 10px solid;      border-color: #f30 transparent transparent;
   }

最高性能等腰三角图形绘制

image.png

        div {            width: 0;            border-width: 20px 10px;            border-style: solid;            border-color: #f30 transparent transparent;
        }

又或者是这种三角形（对话框气泡下的三角形）

image.png

        div {            width: 0;            border-width: 20px 10px;            border-style: solid;            border-color: #f30 #f30 transparent transparent;
        }

最高性能梯形图形绘制

image.png

        div {            width: 10px;            height: 10px;            border: 10px solid;            border-color: #f30 transparent transparent;
        }

逼真 的 3D 效果

image.png

        div {            width: 10px;            height: 10px;            border: 10px solid;            border-color: #f30 #00f #396 #0f0;
        }

被遗忘的ex单位

实现箭头居中文字垂直方向（不受字体、字号影响）

image.png

html>
    
    
    
    

       箭头居中对齐        
    

永远居中的dialog（可兼容到IE7）

image.png

html>
    
    
    
    

        

            
这dialog永远居中
        

    

去除页面默认滚动条(PC端有效)

/**good code**/
 html {            overflow: hidden;
        }/**bad code**/
 html, body {    
            overflow: hidden;
        }

作者：giants_one
链接：https://www.jianshu.com/p/63964f90fd6d