CSS 负值技巧：outline-offset 实现加号和单面投影

使用负值 outline-offset 实现加号 。嗯？出于好奇，我立即尝试了一下。如何使用负轮廓偏移到达加号？

使用负轮廓偏移值来实现加号

假设我们有一个如下所示的简单结构：

<div></div>
复制代码

div {
    width: 200px; height: 200px;
    outline: 20px solid #000;
    outline-offset: 10px;
}
复制代码

将 outline-offset 更改为适当的负值，然后在适当的时候，轮廓边框会缩进到加号。

经过几次尝试，将上面div的outline-offset改为-118px。

div {
    width: 200px; height: 200px;
    outline: 20px solid #000;
    outline-offset: -118px;
}
复制代码

添加动画效果，类似这样：

CodePen Demo -- 使用轮廓来实现加号

非常有趣。我尝试了很多不同的情况，最后我想出了一个简单的规则，使用否定。生成加号的轮廓偏移有一些简单的约束：

• 容器必须是正方形
• outline 边框宽度本身不能太小
• outline-offset 负x值的范围是： -(容器宽度的一半 + 轮廓的一半宽度)

经过这个例子，我想到CSS属性有很多地方可以接受负数价值观。最著名的是负边距。通过使用负边距，可以实现多列等高布局、垂直居中等。还有其他有趣的使用负值的技术吗？

下面，我们将介绍一些使用负 CSS 值的有趣场景。

单面投影

先说单面投影。至于box-shadow，大多数时候我们用它来创建双面或四面投影。 。像这样：

好吧，如果你想创建一个单面投影怎么办？

让我们看看使用box-shadow的定义：

{
    box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
}
复制代码

让我们以box-shadow：1px 2px 3px 4px #333。这四个值的值就是x方向的偏移值。 ，y方向偏移值，模糊半径，扩展半径。

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

继续，如果阴影模糊半径与负扩张半径一致，那么我们将不会看到任何阴影，因为除非指定了“设置偏移到方向”，否则生成的阴影将包含在原始元素下方。因此，我们目前提供一个方向的偏移值来实现单面投影：

CodePen Demo -- css单面投影

使用缩放（-1）实现翻转

通常可以实现180°翻转元素，我们将使用变换：旋转（180deg）。这里有一个小技巧。使用 transform:scale(-1) 可以达到相同的效果。看演示： 果 看效果：

( GIF 中第一行是使用 变换：旋转 (180deg) )

Codepen Demo- - 使用比例 ( -1) 翻转元素

使用负字母间距以相反​​顺序排列文本

与上面的比例 (-1) 类似，负 字母间距 。属性

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;
    }
}
复制代码

设置文本字母间距从0 -> 36px -> -72px并观察各种变化：

CodePen演示 - 负字母间距以相反​​的顺序排列文本

但由于中英文混排或字体不同，以及倒序排列方式，不建议使用该方式对文本进行倒序排列。

使用负的transition-delay和animation-delay值可以立即开始动画

我们知道CSS动画和transition提供了delay属性，可以减慢动画的进度。

看下面的动画：

简单的代码大概是这样的：

<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) ;
    }
}
复制代码

为了去掉这个延迟，我们希望进入页面时三个球同时移动。现在你只需要将正动画延迟更改为负动画延迟即可。

.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一个负值的动画会立即完成，起始位置是它的动画级别之一。因此，一开始的动画如下：

以上面的动画为例，定义了一个运行3秒的动画。如果animation-delay为-1s，则起点相当于正常执行。位置为 2 秒 (3-1)。 ？

在Flexbox布局规范流行之前，实现同高度的多行布局仍然需要花费很大的力气。一种方法是使用正填充和负边距取消。

的布局如下：

左右栏内容不确定，即高度未知。但我希望无论左边内容多还是右边内容多，两列的高度始终保持不变。

好的，一种破解方法是使用较大的正偏移和相等的负边距来填充左右列：

.g-left {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

.g-right {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}
复制代码

您可以确保无论左右列的高度发生变化，高度都会降低。该列将随着另一列而改变。

具体代码可以看这里：CodePen Demo -- 正内边距和负外边距允许多列等高布局

总结一下

另外，还有一些大家熟知的，没有具体列出，如：

• 使用负边距实现元素的水平和垂直居中
• 使用负边距隐藏列表开头和结尾的多余边框li
• 使用负文本偏移量隐藏文本
• 使用负数z-index来协作上下文级联

还有一些很深奥的，比如张新旭在今年CSS大会上分享的，利用负不透明度结合自定义CSS属性在CSS中实现伪条件判断，使用pure CSS实现蛋糕360°。图片效果：

• CSS大会第五个主题，分享CSS的创意和视觉表现

最后

好吧，虽然有些使用负CSS值的场景确实很有用，但也能带来最重要的是降低了代码的可读性。有时当我看到这些代码时，我必须好好看看它们，让自己平静下来，然后感叹，仅此而已。

如果还有其他更好、更容易理解的实现方法，请在使用时慎重考虑。

作者：chokcoco
链接：https://juejin.im/post/5d4b8707f265da03a65302bd
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明来源。