写这篇文章的原因是有一天在群里，一位同学说错了，用负值outline-offset来实现加号。嗯？很好奇，我立即尝试了一下。如何使用negativeoutline-offset来实现加号？使用负的outline-offset实现加号假设我们有这样一个简单的结构：
div{width:200px;height:200px;outline:20pxsolid#000;outline-offset:10px;}修改outline-偏移到一个合适的负值，然后在适当的时候，轮廓边框将缩进到一个加号。经过一番尝试，将上述div的outline-offset修改为-118px。div{width:200px;height:200px;outline:20pxsolid#000;outline-offset:-118px;}加个动画效果，大概是这样的：CodePenDemo——用outline实现加号[1]很有意思，我尝试在讨论了很多不同的情况后，最终得出了一个简单的规则。要使用负的outline-offset来生成加号，有一些简单的限制：容器必须是正方形轮廓border本身的宽度不能太小outline-offset负值x取值范围是：-(容器宽度的一半+轮廓宽度的一半)
???]]]#}以box-shadow:1px2px3px4px#333为例，四个值的含义分别是x方向的偏移值和y方向的偏移值、BlurRa??dius、Dilation半径。这里有个小技巧，展开半径可以为负。继续，如果阴影的模糊半径与负扩散半径重合，那么我们将看不到任何阴影，因为生成的阴影将包含在原始元素下，除非它被赋予方向偏移。所以这时候，我们可以通过给一个方向的偏移值来实现单边投影：imageCodePenDemo--cssone-sidedprojection[2]使用scale(-1)实现翻转。通常，我们想要实现一个元素的180°翻转，我们会使用transform:rotate(180deg)，这里有一个小技巧，使用transform:scale(-1)可以达到同样的效果。看一个演示：CSSNagativeScale(-1).scale{transform:scale(1);animation:scale10sinfinitelinear;}@keyframessscale{50%{transform:scale(-1);}100%{transform:scale(-1);}}看效果：（GIF中第一行是使用transform:rotate(180deg)的效果）CodePenDemo--使用scale(-1)实现元素的翻转[3]使用负字母间距以相反??的顺序排列文本。它类似于上面的scale(-1)，它与负字母间距具有相同的效果。letter-spacing属性定义文本的间距行为。一般来说，除了关键字normal，我们还可以指定一个size来表示文字的间距。像这样：倒序排列文本.letter_spacing{font-size:36px;letter-spacing:0px;animation:move10sinfinite;}@keyframesmove{40%{letter-spacing:36px;}80%{letter-spacing:-72px;}100%{letter-spacing:-72px;}}我们将文本的字母间距设置为0->36px->-72px，观察不同的变化：CodePenDemo--Negativeletter-spacingArrangetextinreverseorder[4]但由于中英文混用或不同字体的影响，以及倒序，不建议使用此方法来倒序排列文字命令。transition-delay和animation-delay的负值用于立即开始动画。我们知道cssanimation和transition提供了一个delay属性，可以延迟动画。考虑以下动画：简单代码如下所示： 