看了CSS 负值技巧与细节的作法

　　一天在群里有同窗说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我立刻也动手尝试了下，究竟是如何使用负的 outline-offset 实现加号呢？

　　使用负值 outline-offset 实现加号

　　假设咱们有这样一个简单的结构：

　　<div></div>

　　复制代码

　　div {

　　width: 200px; height: 200px;

　　outline: 20px solid #000;

　　outline-offset: 10px;

　　}

　　复制代码

　　offset

　　修改 outline-offset 到一个合适的负值 ，那么在恰当的时候，outline 边框就会向内缩进为一个加号。

　　通过一番尝试，修改上述 div 的 outline-offset为 -118px。

　　div {

　　width: 200px; height: 200px;

　　outline: 20px solid #000;

　　outline-offset: -118px;

　　}

　　复制代码

　　加个动画效果，大概是这样：

　　offset

　　CodePen Demo -- 使用outline实现加号

　　颇有意思，我尝试了不少不一样的状况，最后总结了一个简单的规律，要使用负的 outline-offset 生成一个加号有一些简单的限制：

　　容器得是个正方形

　　outline 边框自己的宽度不能过小

　　outline-offset 负值 x 的取值范围为: -(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度)

　　在这个例子后，我又想，CSS 属性能够取负值的地方有不少。你们最为熟知的就是负margin，使用负的 marign，能够用来实现相似多列等高布局、垂直居中等等。那还有没有其余一些有意思的负值使用技巧呢？

　　下文就再介绍一些 CSS 负值有意思的使用场景。

　　单侧投影

　　先说单侧投影，关于 box-shadow，大部分时候，咱们使用它都是用来生成一个两侧的投影，或者一个四侧的投影。以下：

　　image

　　OK，那若是要生成一个单侧的投影呢？

　　咱们来看看 box-shadow 的用法定义：

　　{

　　box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

　　}

　　复制代码

　　以 box-shadow: 1px 2px 3px 4px #333 为例，4 个数值的含义分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径。

　　这里有一个小技巧，扩张半径能够为负值。

　　继续，若是阴影的模糊半径，与负的扩张半径一致，那么咱们将看不到任何阴影，由于生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量。因此这个时候，咱们给定一个方向的偏移值，便可实现单侧投影：

　　image

　　CodePen Demo -- css单侧投影

　　使用 scale(-1) 实现翻转

　　一般，咱们要实现一个元素的 180° 翻转，咱们会使用 transform: rotate(180deg)，这里有个小技巧，使用 transform: scale(-1) 能够达到一样的效果。看个 Demo：

　　<p class="scale">CSS Nagative Scale(-1)</p>

　　复制代码

　　.scale {

　　transform: scale(1);

　　animation: scale 10s infinite linear;

　　}

　　@keyframes scale{

　　50% {

　　transform: scale(-1);

　　}

　　100% {

　　transform: scale(-1);

　　}

　　}

　　复制代码

　　看看效果：

　　scale-1

　　（GIF 中第一行是使用了 transform: rotate(180deg) 的效果）

　　CodePen Demo -- 使用 scale(-1) 实现元素的翻转

　　使用负 letter-spacing 倒序排列文字

　　与上面 scale(-1) 有殊途同归之妙的是负的 letter-spacing。

　　letter-spacing 属性明确了文字的间距行为，一般而言，除了关键字 normal，咱们还能够指定一个大小，表示文字的间距。像这样：

　　<p class="letter_spacing">倒序排列文字</p>

　　复制代码

　　.letter_spacing {

　　font-size: 36px;

　　letter-spacing: 0px;

　　animation: move 10s infinite;

　　}

　　@keyframes move {

　　40% {

　　letter-spacing: 36px;

　　}

　　80% {

　　letter-spacing: -72px;

　　}

　　100% {

　　letter-spacing: -72px;

　　}

　　}

　　复制代码

　　咱们设置文字的 letter-spacing 从 0 -> 36px -> -72px，观察不一样的变化：

　　letter-spacing

　　CodePen Demo -- 负letter-spacing倒序排列文字

　　然而，受到中英文混排或者不一样字体的影响，以及倒序后的排列方式，不建议使用这种方式来倒序排列文字。

　　transition-delay 及 animation-delay 的负值使用，马上开始动画

　　咱们知道，CSS 动画及过渡提供了一个 delay 属性，能够延迟动画的进行。

　　考虑下面这个动画：

　　transition-delay2

　　简单的代码大概是这样：

　　<div class="g-container">

　　<div class="item"></div>

　　<div class="item"></div>

　　<div class="item"></div>

　　</div>

　　复制代码

　　.item {

　　transform: rotate(0) translate(-80px, 0) ;

　　}

　　.item:nth-child(1) {

　　animation: rotate 3s infinite linear;

　　}

　　.item:nth-child(2) {

　　animation: rotate 3s infinite 1s linear;

　　}

　　.item:nth-child(3) {

　　animation: rotate 3s infinite 2s linear;

　　}

　　@keyframes rotate {

　　100% {

　　transform: rotate(360deg) translate(-80px, 0) ;

　　}

　　}

　　复制代码

　　若是，咱们想去掉这个延迟，但愿在一进入页面的时候，3 个球就是同时运动的。这个时候，只须要把正向的 animation-delay 改为负向的便可。

　　.item:nth-child(1) {

　　animation: rotate 3s infinite linear;

　　}

　　.item:nth-child(2) {

　　animation: rotate 3s infinite -1s linear;

　　}

　　.item:nth-child(3) {

　　animation: rotate 3s infinite -2s linear;

　　}

　　复制代码

　　这里，有个小技巧，被设置了 animation-dealy 为负值的动画会马上执行，开始的位置是其动画阶段中的一个阶段。因此，动画在一开始的时刻就是下面这样：

　　transition-delay

　　以上述动画为例，一个被定义执行 3s 的动画，若是 animation-delay 为 -1s，起点至关于正常执行时，第2s（3-1）时的位置。

　　CodePen Demo -- 使用负值 animation-delay 提早执行动画

　　负值 margin

　　负值 margin 在 CSS 中算是运用的比较多的，元素的外边距能够设置为负值。

　　在 flexbox 布局规范还没流行以前，实现多行等高布局仍是须要下一番功夫的。其中一种方法即是使用正 padding 负 margin 相消的方法。

　　有以下一个布局：

　　paddingmargin

　　左右两栏的内容都是不肯定的，也就是高度未知。可是但愿不管左侧内容较多仍是右侧内容较多，两栏的高度始终保持一致。

　　OK，其中一种 Hack 办法即是使用一个很大的正 padding 和相同的负 margin 相消的方法填充左右两栏：

　　.g-left {

　　...

　　padding-bottom: 9999px;

　　margin-bottom: -9999px;

　　}

　　.g-right {

　　...

　　padding-bottom: 9999px;

　　margin-bottom: -9999px;

　　}

　　复制代码

　　能够作到不管左右两栏高度如何变化，高度较低的那一栏都会随着另一栏变化。