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

FrozenMap 发布于2019-08-30 15:44 / 1753人阅读

摘要：大家最为熟知的就是负，使用负的，可以用来实现类似多列等高布局垂直居中等等。那还有没有其他一些有意思的负值使用技巧呢下文就再介绍一些负值有意思的使用场景。但是希望无论左侧内容较多还是右侧内容较多，两栏的高度始终保持一致。

写本文的起因是，一天在群里有同学说误打误撞下，使用负的 outline-offset 实现了加号。嗯？好奇的我马上也动手尝试了下，到底是如何使用负的 outline-offset 实现加号呢？

使用负值 outline-offset 实现加号

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

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

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

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

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

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

CodePen Demo -- 使用outline实现加号

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

容器得是个正方形

outline 边框本身的宽度不能太小

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

在这个例子后，我又想，CSS 属性可以取负值的地方有很多。大家最为熟知的就是负margin，使用负的 marign，可以用来实现类似多列等高布局、垂直居中等等。那还有没有其他一些有意思的负值使用技巧呢？

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

单侧投影

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

OK，那如果要生成一个单侧的投影呢？

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

{
    box-shadow: none | [inset? && [   ? ? ? ] ]#
}

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

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

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

CodePen Demo -- css单侧投影

使用 scale(-1) 实现翻转

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

CSS Nagative Scale(-1)

.scale {
    transform: scale(1);
    animation: scale 10s infinite linear;
}

@keyframes scale{
    50% {
        transform: scale(-1);
    }  
    100% {
        transform: scale(-1);
    }
}

看看效果：

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

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

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

与上面 scale(-1) 有异曲同工之妙的是负的 letter-spacing。

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

倒序排列文字

.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，观察不同的变化：

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

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

transition-delay 及 animation-delay 的负值使用，立刻开始动画

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

考虑下面这个动画：

简单的代码大概是这样：

.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 为负值的动画会立刻执行，开始的位置是其动画阶段中的一个阶段。所以，动画在一开始的时刻就是下面这样：

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

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

负值 margin

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

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

有如下一个布局：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116259.html

你所不知道的 CSS 阴影技巧与细节

摘要：本文的题目是阴影技巧与细节。立体投影好，我们继续。下一个主题是立体投影。但是，使用它们生成的阴影通常只能是单色或者同色系的。你这么说，难道还可以生成渐变色的阴影不成额，当然不行。关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。最近一个新的项目，CSS-Inspira...

supernavy 2019-08-29 17:12 评论0 收藏0
你所不知道的 CSS 阴影技巧与细节

摘要：本文的题目是阴影技巧与细节。下一个主题是立体投影。正常而言，我们使用来生成文字阴影，像这样嗯，挺好的，就是不够立体。但是，使用它们生成的阴影通常只能是单色或者同色系的。你这么说，难道还可以生成渐变色的阴影不成额，当然不行。关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。最近...

stormzhang 2019-04-23 13:13 评论0 收藏0
CSS 滤镜技巧与细节

摘要：简单来说，滤镜就是提供类似的图形特效，像模糊，锐化或元素变色等功能。常用用法既然是标题是你所不知道的技巧与细节，那么比较常用的一些用法就不再赘述，通常我们见得比较多的滤镜用法有使用生成毛玻璃效果使用生成整体阴影效果使用生成透明度本文主要介绍 CSS 滤镜的不常用用法，希望能给读者带来一些干货！注意：ie不兼容本文所描述的滤镜，指的是 CSS3 出来后的滤镜，不是 IE 系列时代的滤镜，话...

tinylcy 2019-04-23 13:34 评论0 收藏0
优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

sunsmell 2019-08-26 13:54 评论0 收藏0
优秀博文收藏（不定期更新）

摘要：我的书签我的书签谨慎导入，小心覆盖工具类版本管理快速切换源配置教程指南可视化工具前端工具集前端助手网络封包截取工具格式化工具标注工具模拟请求类深入浅出布局你所不知道的动画技巧与细节常用代码黑魔法小技巧，让你少写不必要的，代码更优雅一劳永我的书签我的书签（谨慎导入，小心覆盖）工具类 nvm: node版本管理 nrm: 快速切换npm源 shell: zsh+on-my-zsh配...

zhangfaliang 2019-08-30 10:57 评论0 收藏0