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