前端css怎么设置（前端CSS负值小技巧及细节）

逗爷 2023-04-29 19:31:22 201

前端css怎么设置（前端CSS负值小技巧及细节）很有意思，我尝试了很多不同的情况，最后总结了一个简单的规律，要使用负的 outline-offset 生成一个加号有一些简单的限制：加个动画效果，大概是这样：修改前端 css 样式 outline-offset 到一个合适的负值，那么在恰当的时候，outline 边框就会向内缩进为一个加号。经过一番尝试，修改上述 div 的 outline-offset为 -118px。div{ width:200px;height:200px; outline:20pxsolid#000; outline-offset:-118px; }

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

使用负值 outline-offset 实现加号

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

<div></div> div{ width:200px;height:200px; outline:20pxsolid#000; outline-offset:10px; }

前端css怎么设置（前端CSS负值小技巧及细节）(1)

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

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

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

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

前端css怎么设置（前端CSS负值小技巧及细节）(2)

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

容器得是个正方形
outline 边框本身的宽度不能太小
outline-offset 负值 x 的取值范围为: -(容器宽度的一半 outline宽度的一半) < x < -(容器宽度的一半 outline宽度)

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

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 方向偏移值、模糊半径、扩张半径。

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

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

前端css怎么设置（前端CSS负值小技巧及细节）(3)

使用 scale(-1) 实现翻转

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

<pclass="scale">CSSNagativeScale(-1)</p> .scale{ transform:scale(1); animation:scale10sinfinitelinear; } @keyframesscale{ 50%{ transform:scale(-1); } 100%{ transform:scale(-1); } }

看看效果：

前端css怎么设置（前端CSS负值小技巧及细节）(4)

GIF 中第一行是使用了 transform: rotate(180deg) 的效果，使用 scale(-1) 实现元素的翻转

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

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

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

<pclass="letter_spacing">倒序排列文字</p> .letter_spacing{ font-size:36px; letter-spacing:0px; animation:move10sinfinite; } @keyframesmove{ 40%{ letter-spacing:36px; } 80%{ letter-spacing:-72px; } 100%{ letter-spacing:-72px; } }

我们设置文字的 css 样式 letter-spacing 从 0 -> 36px -> -72px，观察不同的变化：

前端css怎么设置（前端CSS负值小技巧及细节）(5)

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

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

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

考虑下面这个动画：

前端css怎么设置（前端CSS负值小技巧及细节）(6)

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

<divclass="g-container"> <divclass="item"></div> <divclass="item"></div> <divclass="item"></div> </div> .item{ transform:rotate(0)translate(-80px 0); } .item:nth-child(1){ animation:rotate3sinfinitelinear; } .item:nth-child(2){ animation:rotate3sinfinite1slinear; } .item:nth-child(3){ animation:rotate3sinfinite2slinear; } @keyframesrotate{ 100%{ 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-2slinear; }

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

前端css怎么设置（前端CSS负值小技巧及细节）(7)