你所不知道的 CSS 负值技巧与细节

1、你所不知道的 css 负值技巧与细节写本文的起因是，一天在群里有学生说误打误撞下，用法负的outline-offset实现了加号。嗯？奇怪的我马上也动手尝试了下，到底是如何用法负的outline-offset实现加号呢？用法负值outline-offset实现加号假设我们有这样一个容易的结构：divwidth:200px;height:200px;outline:20pxsolid000;outline-offset:10px;修改outline-offset到一个合适的负值，那么在恰当的时候，outline边框就会向内缩进为一个加号。经过一番尝试，修改上述div的outline-offset

2、为-118px。divwidth:200px;height:200px;outline:20pxsolid000;outline-offset:-118px;加个动画效果，也许是这样：codependemo-用法outline实现加号很故意思，我尝试了无数不同的状况，最后总结了一个容易的逻辑，要用法负的outline-offset生成一个加号有一些容易的限制：容器得是个正方形outline边框本身的宽度不能太小outline-offset负值x的取值范围为:-(容器宽度的一半+outline宽度的一半)?以box-shadow:1px2px3px4px333为例，4个数值的含义分离是，x方向偏

3、移值、y方向偏移值、含糊半径、扩张半径。这里有一个小技巧，扩张半径可以为负值。继续，假如阴影的含糊半径，与负的扩张半径全都，那么我们将看不到任何阴影，由于生成的阴影将被包含在本来的元素之下，除非给它设定一个方向的偏移量。所以这个时候，我们给定一个方向的偏移值，即可实现单侧投影：codependemo-css单侧投影用法scale(-1)实现翻转通常，我们要实现一个元素的180°翻转，我们会用法transform:rotate(180deg)，这里有个小技巧，用法transform:scale(-1)可以达到同样的效果。看个demo：cssnagativescale(-1).sc

4、aletransform:scale(1);animation:scale10sinfinitelinear;keyframesscale50%transform:scale(-1);100%transform:scale(-1);看看效果：（gif中第一行是用法了transform:rotate(180deg)的效果）codependemo-用法scale(-1)实现元素的翻转用法负letter-spacing倒序罗列文字与上面scale(-1)有异曲同工之妙的是负的letter-spacing。letter-spacing属性明确了文字的间距行为，通常而言，除了关键字normal，我们还可

5、以指定一个大小，表示文字的间距。像这样：倒序罗列文字.letter_spacingfont-size:36px;letter-spacing:0px;animation:move10sinfinite;keyframesmove40%letter-spacing:36px;80%letter-spacing:-72px;100%letter-spacing:-72px;我们设置文字的letter-spacing从0->36px->-72px，观看不同的变幻：codependemo-负letter-spacing倒序罗列文字然而，受到中英文混排或者不同字体的影响，以及倒序后的罗列方式

6、，不建议用法这种方式来倒序罗列文字。transition-delay及animation-delay的负值用法，立即开头动画我们知道，css动画及过渡提供了一个delay属性，可以延迟动画的举行。考虑下面这个动画：容易的代码也许是这样：.itemtransform:rotate(0)translate(-80px,0);.item:nth-child(1)animation:rotate3sinfinitelinear;.item:nth-child(2)animation:rotate3sinfinite1slinear;.item:nth-child(3)animation:rotate3

7、sinfinite2slinear;keyframesrotate100%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

8、-2slinear;这里，有个小技巧，被设置了animation-dealy为负值的动画会立即执行，开头的位置是其动画阶段中的一个阶段。所以，动画在一开头的时刻就是下面这样：以上述动画为例，一个被定义执行3s的动画，假如animation-delay为-1s，起点相当于正常执行时，第2s（3-1）时的位置。codependemo-用法负值animation-delay提前执行动画负值margin负值margin在css中算是运用的比较多的，元素的外边距可以设置为负值。在flexbox布局规范还没流行之前，实现多行等高布局还是需要下一番功夫的。其中一种办法便是用法正padding负margin相

9、消的办法。有如下一个布局：左右两栏的内容都是不确定的，也就是高度未知。但是希翼无论左侧内容较多还是右侧内容较多，两栏的高度始终保持全都。ok，其中一种hack方法便是用法一个很大的正padding和相同的负margin相消的办法填充左右两栏：.g-left.padding-bottom:9999px;margin-bottom:-9999px;.g-right.padding-bottom:9999px;margin-bottom:-9999px;可以做到无论左右两栏高度如何变幻，高度较低的那一栏都会随着另外一栏变幻。详细的代码可以看看这里：codependemo-正padding负margi

10、n实现多列等高布局总结一下另外，还有一些大家熟知的没有单独列出来的，譬如：用法负marign实现元素的水平垂直居中用法负marign躲藏列表li首尾多余的边框用法负text-indent实现文字的躲藏用法负的z-index参加层叠上下文排序还有一些很浅显的，譬如张鑫旭大大在今年的css大会上共享的，利用负的opacity在css中实现了伪条件推断，协作css自定义属性，用法纯css实现360°的饼图效果：第五届css大会主题共享之css创意与视觉表现最后额，虽然css负值的一些用法场景确实有实用之处，但是与此同时有可能带来的是代码可读性的下降。有的时候看到这些代码不得不好好捋一捋才干缓过神来，再感叹一句，本来如此。假如有其他