底是如何使用负的outline-offset实现加号呢？
使用负值outline-offset实现加号
假设我们有这样一个简单的结构：
<div></div>
div{
width:200px;height:200px;
outline:20pxsolid#000;
outline-offset:10px;
}
修改outline-offset到一个合适的负值，那么在恰当的时候，outline边框就会向内缩进为一个加号。
经过一番尝试，修改上述div的outline-offset为-118px。
div{
width:200px;height:200px;
outline:20pxsolid#000;
outline-offset:-118px;
}
加个动画效果，大概是这样：
CodePenDemo--使用outline实现加号
很有意思，我尝试了很多不同的情况，最后总结了一个简单的规律，要使用负的outline-offset生成一个加号有一些简单的限制：
容器得是个正方形
outline边框本身的宽度不能太小
outline-offset负值x的取值范围为:-(容器宽度的一半+outline宽度的一半)<x<-(容器宽度的一半+outline宽度)
在这个例子后，我又想，CSS属性可以取负值的地方有很多。大家最为熟知的就是负margin，使用负的marign，可以用来实现类似多列等高布局、垂直居中等等。那还有没有其他一些有意思的负值使用技巧呢？
下文就再介绍一些CSS负值有意思的使用场景。
单侧投影
先说单侧投影，关于box-shadow，大部分时候，我们使用它都是用来生成一个两侧的投影，或者一个四侧的投影。如下：
OK，那如果要生成一个单侧的投影呢？
我们来看看box-shadow的用法定义：
{
box-shadow:none|[inset?&&[<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]#
}
以box-shadow:1px2px3px4px#333为例，4个数值的含义分别是，x方向偏移值、y方向偏移值、模糊半径、扩张半径。
这里有一个小技巧，扩张半径可以为负值。
继续，如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量。所以这个时候，我们给定一个方向的偏移值，即可实现单侧投影：
CodePenDemo--css单侧投影
使用scale(-1)实现翻转
通常，我们要实现一个元素的180°翻转，我们会使用transform:rotate(180deg)，这里有个小技巧，使用transform:scale(-1)可以达到同样的效果。看个Demo：
<pclass="scale">CSSNagativeScale(-1)</p>
.scale{
transform:scale(1);
animation:scale10sinfinitelinear;
}
@keyframesscale{
50%{
transform:scale(-1);
}
100%{
transform:scale(-1);
}
}
看看效果：
（GIF中第一行是使用了transform:rotate(180deg)的效果）
CodePenDemo--使用scale(-1)实现元素的翻转
使用负letter-spacing倒序排列文字
与上面scale(-1)有异曲同工之妙的是负的letter-spacing。
letter-spacing属性明确了文字的间距行为，通常而言，除了关键字normal，我们还可以指定一个大小，表示文字的间距。像这样：
<pclass="letter_spacing">倒序排列文字</p>
.letter_spacing{
font-size:36px;
letter-spacing:0px;
animation:move10sinfinite;
}
@keyframesmove{
40%{
letter-spacing:36px;
}
80%{
letter-spacing:-72px;
}
100%{
letter-spacing:-72px;
}
}
我们设置文字的letter-spacing从0->36px->-72px，观察不同的变化：
CodePenDemo--负letter-spacing倒序排列文字
然而，受到中英文混排或者不同字体的影响，以及倒序后的排列方式，不建议使用这种方式来倒序排列文字。
transition-delay及animation-delay的负值使用，立刻开始动画
我们知道，CSS动画及过渡提供了一个delay属性，可以延迟动画的进行。
考虑下面这个动画：
简单的代码大概是这样：
<divclass="g-container">
<divclass="item"></div>
<divclass="item"></div>
<divclass="item"></div>
</div>
.item{
transform:rotate(0)translate(-80px,0);
}
.item:nth-child(1){
animation:rotate3sinfinitelinear;
}
.item:nth-child(2){
animation:rotate3sinfinite1slinear;
}
.item:nth-child(3){
animation:rotate3sinfinite2slinear;
}
@keyframesrotate{
100%{
transform:rotate(360deg)translate(-80px,0);
}
}
如果，我们想去掉这个延迟，希望在一进入页面的时候，3个球就是同时运动的。这个时候，只需要把正向的animation-delay改成负向的即可。
.item:nth-child(1){
animation:rotate3sinfinitelinear;
}
.item:nth-child(2){
animation:rotate3sinfinite-1slinear;
}
.item:nth-child(3){
animation:rotate3sinfinite-2slinear;
}
这里，有个小技巧，被设置了animation-dealy为负值的动画会立刻执行，开始的位置是其动画阶段中的一个阶段。所以，动画在一开始的时刻就是下面这样：
以上述动画为例，一个被定义执行3s的动画，如果animation-delay为-1s，起点相当于正常执行时，第2s（3-1）时的位置。
CodePenDemo--使用负值animation-delay提前执行动画
负值margin
负值margin在CSS中算是运用的比较多的，元素的外边距可以设置为负值。
在flexbox布局规范还没流行之前，实现多行等高布局还是需要下一番功夫的。其中一种方法便是使用正padding负margin相消的方法。
有如下一个布局：
左右两栏的内容都是不确定的，也就是高度未知。但是希望无论左侧内容较多还是右侧内容较多，两栏的高度始终保持一致。
OK，其中一种Hack办法便是使用一个很大的正padding和相同的负margin相消的方法填充左右两栏：
.g-left{
...
padding-bottom:9999px;
margin-bottom:-9999px;
}
.g-right{
...
padding-bottom:9999px;
margin-bottom:-9999px;
}
可以做到无论左右两栏高度如何变化，高度较低的那一栏都会随着另外一栏变化。
具体的代码可以看看这里：CodePenDemo--正padding负margin实现多列等高布局
总结一下
另外，还有一些大家熟知的没有单独列出来的，譬如：
使用负marign实现元素的水平垂直居中
使用负marign隐藏列表li首尾多余的边框
使用负text-indent实现文字的隐藏
使用负的z-index参与层叠上下文排序
还有一些很深奥的，譬如张鑫旭大大在今年的CSS大会上分享的，利用负的opacity在CSS中实现了伪条件判断，配合CSS自定义属性，使用纯CSS实现360°的饼图效果：
第五届CSS大会主题分享之CSS创意与视觉表现
最后
额，虽然CSS负值的一些使用场景的确有有用之处，但是与此同时有可能带来的是代码可读性的下降。有的时候看到这些代码不得不好好捋一捋才能缓过神来，再感叹一句，原来如此。
如果有其他更好的更易理解的实现方式，具体使用实现的时候应该好好权衡一下。
好了，本文到此结束，希望对你有帮助:)
更多精彩CSS技术文章汇总在我的Github--iCSS，持续更新，欢迎点个star订阅收藏。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html