CSS-冷门技巧分享
（一）如何实现一个加号？
之前我在看别人关于css的文章中提到了使用负的 outline-offset 实现了加号，因此研究了一下。
我们一般实现加号的方式，就是直接使用字符：+，是不是非常方便？但是存在一个问题，我们看下面的例子，大家思考一下怎么实现：
请实现一个50像素x50像素的加号+（不用图片）【点击】
是不是我们将font-size属性设置为50px就可以实现呢？
可以看出明显不行，我将这个容器的高度设置为了50像素，但是加号的大小明显更小，而且在不设置line-height属性的情况下，还会不上下居中，并且粗细不可控，如果设置line-height呢：
位置仍然是偏下的。
那如果我们将font-size属性设置更大一些，100像素？
此时的加号，我通过工具测量出的大小是55px，这说明，想用font-size属性实现固定大小的加号，不是最优选，这种方式很难控制实现的加号大小跟位置。
用 outline(轮廓) 和负的 outline-offset(轮廓偏移) 实现一个50像素x50像素的加号+：
一个完美的50像素x50像素加号：
实现非常简单，首先确定宽高，设置outline属性为1/2宽高 + 1（加号的粗细），outline-offset为宽高值的负数即可。
上面我们提到，直接用文字时无法控制我们想要的加号粗细、垂直居中效果，但是outline属性也可以轻松解决，增加或减小outline值：
此方式实现+号，还可以进行扩展，以往开发中遇到的关闭按钮，以及新增按钮，可以不用切图，直接用样式实现：
（二）单侧投影
box-shadow，是常用来实现盒子投影的属性，我们通常来做两侧投影&多边投影，但其实，负数值可以实现单侧投影。
box-shadow属性4个数值的含义分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径，单侧投影的原理就是如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量，简单理解就是，前两个数值控制阴影中心，最后一个数值控制阴影大小。
（三）翻转
我们要实现一个元素的 180° 翻转，我们会使用 transform: rotate(180deg)，这里有个小技巧，使用 transform: scale(-1) 可以达到同样的效果。
box-shadow属性4个数值的含义分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径，单侧投影的原理就是如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量，简单理解就是，前两个数值控制阴影中心，最后一个数值控制阴影大小。
（四）文字倒序
负的 letter-spacing 可以实现一段文字倒序排列，这种技巧实际使用很少。
（五）实现等高布局
flexbox 布局是目前实现等高布局最主流的方法，不过 padding + margin 的结合，也可以实现。
这是两个普通非等高布局
左盒子
左盒子
左盒子
padding + margin 结合实现等高布局，原理其实是使用一个很大的正 padding 和相同的负 margin 相消的方法填充左右两栏
左盒子
左盒子
左盒子
（六）去除多余边距&border
我们在开发时经常遇到这样的样式处理：每个列表之间设置一定的间距（margin-right），这样是为了多个元素并排展示时，中间留有空隙，此时在父容器定宽的情况下，元素会错位，比如：
这就出现了一个问题，右侧跟底部的边距，是不希望展示出来的，这时候我们通常的处理方法是，单行展示：用last-child选择器，多行展示，用:nth-child(3n+0)：
上面的选择器解决了右侧边距的问题，但是没有解决底部的问题，其实最简单的技巧就是，增加一层包裹的父节点，并设置其负margin，并设置 overflow: hidden：
参考及扩展：
1-负值之美：负margin在页面布局中的应用
2-使用css outline-offset 属性 实现加号
3-纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
4-第五届CSS大会主题分享之CSS创意与视觉表现