写本文的起因是,一天在群里有前端同学说误打误撞下,使用负的 outline-offset 实现了加号。嗯?好奇的我马上也动手尝试了下,到底是如何使用负的 outline-offset 实现加号呢?
使用负值 outline-offset 实现加号
假设我们有这样一个简单的 CSS+HTML 结构:
修改前端 css 样式 outline-offset 到一个合适的负值 ,那么在恰当的时候,outline 边框就会向内缩进为一个加号。
经过一番尝试,修改上述 div 的 outline-offset为 -118px。
div{width:200px;height:200px;outline:20pxsolid#000;outline-offset:-118px;}
加个动画效果,大概是这样:
很有意思,我尝试了很多不同的情况,最后总结了一个简单的规律,要使用负的 outline-offset 生成一个加号有一些简单的限制:
容器得是个正方形
outline 边框本身的宽度不能太小
outline-offset 负值 x 的取值范围为: -(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度)
在这个例子后,我又想,前端 css 样式属性可以取负值的地方有很多。大家最为熟知的就是负margin,使用负的 marign,可以用来实现类似多列等高布局、垂直居中等等。那还有没有其他一些有意思的负值使用技巧呢?
下文就再介绍一些前端 css 样式负值有意思的使用场景。
单侧投影
先说单侧投影,关于 css 属性 box-shadow,大部分时候,我们使用它都是用来生成一个两侧的投影,或者一个四侧的投影。如下:
OK,那如果要生成一个单侧的投影呢?
我们来看看 box-shadow 的用法定义:
{box-shadow:none|[inset?&&[???]]#}
以 box-shadow: 1px 2px 3px 4px #333 为例,4 个数值的含义分别是,x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径。
这里有一个小技巧,扩张半径可以为负值。
继续,如果阴影的模糊半径,与负的扩张半径一致,那么我们将看不到任何阴影,因为生成的阴影将被包含在原来的元素之下,除非给它设定一个方向的偏移量。所以这个时候,我们给定一个方向的偏移值,即可实现单侧投影:
使用 scale(-1) 实现翻转
通常,我们要实现一个元素的 180° 翻转,我们会使用 transform: rotate(180deg),这里有个前端 css 样式小技巧,使用 transform: scale(-1) 可以达到同样的效果。看个 Demo:
CSSNagativeScale(-1)
.scale{transform:scale(1);animation:scale10sinfinitelinear;}@keyframesscale{50%{transform:scale(-1);}100%{transform:scale(-1);}}看看效果:
GIF 中第一行是使用了 transform: rotate(180deg) 的效果,使用 scale(-1) 实现元素的翻转
使用负 letter-spacing 倒序排列文字
与上面 scale(-1) 有异曲同工之妙的是负的 letter-spacing。
前端 css 属性 letter-spacing 属性明确了文字的间距行为,通常而言,除了关键字 normal,我们还可以指定一个大小,表示文字的间距。像这样:
倒序排列文字
.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,观察不同的变化:
然而,受到中英文混排或者不同字体的影响,以及倒序后的排列方式,不建议使用这种方式来倒序排列文字。
transition-delay 及 animation-delay 的负值使用,立刻开始动画
我们知道,前端 css 属性动画及过渡提供了一个 delay 属性,可以延迟动画的进行。
考虑下面这个动画:
简单的 HTML+CSS 代码大概是这样: