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

使用负值 outline-offset 实现加号

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

<div></div>
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? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
}

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

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

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

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);
}
}

看看效果:

(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,观察不同的变化:

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

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

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

我们知道,CSS 动画及过渡提供了一个 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) ;
}
}

如果,我们想去掉这个延迟,希望在一进入页面的时候,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 相消的方法。

有如下一个布局:

左右两栏的内容都是不确定的,也就是高度未知。但是希望无论左侧内容较多还是右侧内容较多,两栏的高度始终保持一致。

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

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

可以做到无论左右两栏高度如何变化,高度较低的那一栏都会随着另外一栏变化。

具体的代码可以看看这里:CodePen Demo -- 正padding负margin实现多列等高布局

总结一下

另外,还有一些大家熟知的没有单独列出来的,譬如:

  • 使用负 marign 实现元素的水平垂直居中
  • 使用负 marign隐藏列表 li 首尾多余的边框
  • 使用负 text-indent 实现文字的隐藏
  • 使用负的 z-index 参与层叠上下文排序

还有一些很深奥的,譬如张鑫旭大大在今年的 CSS 大会上分享的,利用负的 opacity 在 CSS 中实现了伪条件判断,配合 CSS 自定义属性,使用纯 CSS 实现 360° 的饼图效果:

最后

额,虽然 CSS 负值的一些使用场景的确有有用之处,但是与此同时有可能带来的是代码可读性的下降。有的时候看到这些代码不得不好好捋一捋才能缓过神来,再感叹一句,原来如此。

如果有其他更好的更易理解的实现方式,具体使用实现的时候应该好好权衡一下。

好了,本文到此结束,希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

你所不知道的 CSS 负值技巧与细节的更多相关文章

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

    关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...

  2. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  3. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  4. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  5. 【CSS】346- 你所不知道的 CSS 阴影技巧与细节

    偷懒了1个多礼拜,在工作饱和的情况下,怎么坚持学习?今天的分享来自@Coco国服第一切图仔,我们聊聊CSS属性box-shadow- 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 ...

  6. 你所不知道的CSS

    1.用FONT-SIZE:0来清除间距 inline-block的元素之间会受空白区域的影响,也就是元素之间差不多会有一个字符的间隙.如果在同一行内有4个25%相同宽度的元素,会导致最后一个元素掉下来 ...

  7. 你所不知道的Spring的@Autowired实现细节

    前言 相信很多Java开发都遇到过一个面试题:Resource和Autowired的区别是什么?这个问题的答案相信基本都清楚,但是这两者在Spring中是如何实现的呢?这就要分析Spring源码才能知 ...

  8. 你可能不知道的Animation动画技巧与细节

    引言 在web应用中,前端同学在实现动画效果时往往常用的几种方案: css3 transition / animation - 实现过渡动画 setInterval / setTimeout - 通过 ...

  9. Android Context完全解析,你所不知道的Context的各种细节

    Context相信所有的Android开发人员基本上每天都在接触,因为它太常见了.但是这并不代表Context没有什么东西好讲的,实际上Context有太多小的细节并不被大家所关注,那么今天我们就来学 ...

随机推荐

  1. 数据结构&算法的引言+时间复杂度

    一.什么是计算机科学? 首先明确的一点就是计算机科学不仅仅是对计算机的研究,虽然计算机在科学发展的过程中发挥了重大的作用,但是它只是一个工具,一个没有灵魂的工具而已.所谓的计算机科学实际上是对问题.解 ...

  2. c++字符数组

    题目描述 题目描述 输入一个英文句子(长度不会超过100),和他的长度,统计每个字母出现的个数. 输入 第一行包括一个整数,表示句子的长度,长度不会超过100.数字后可能会有多余的无效字符 请gets ...

  3. secureCRT背景颜色

    secureCRT是我们常用的linux远程登录软件,某些情况下我们安装的secureCRT工具可能默认背景颜色为白色,使用时很容易造成眼睛的疲劳,网上有些教程也只是修改当前登录窗口背景颜色,新的连接 ...

  4. 用Python玩数据-笔记整理-第二章

    条件结构: if语句: if expression: #比较/成员/逻辑运算符 expr_true_suite #代码块必须缩进4个空格 else语句: if expression: expr_tru ...

  5. 算法与数据结构基础 - 堆(Heap)和优先级队列(Priority queue)

    堆基础 堆(Heap)是具有这样性质的数据结构:1/完全二叉树 2/所有节点的值大于等于(或小于等于)子节点的值: 图片来源:这里 堆可以用数组存储,插入.删除会触发节点shift_down.shif ...

  6. msf出现Database not connected等问题【已解决】

         kali启动msf后,出现Module database cache not built yet, using slow search,或是Database not connected,或是 ...

  7. who are you?

    不多说,直接使用脚本跑 # -*- coding:utf-8 -*- import requests import string url = "http://ctf5.shiyanbar.c ...

  8. npm-472错误

    今天无聊给npm进行了一波升级,却没想到导致出现bug,搞了半天才解决了....这里进行一下分享 1.安装npm npm install -g 升级到最新版npm install -g npm@< ...

  9. 【CYH-02】NOIp考砸后虐题赛:成绩:题解

    这道题挺送水了吧... 两种做法. 其实空间都不需要那么大,我来提交界面一看一堆MLE的,于是还是良心的放开了时限. 这么简单,就不做解释了. 下面放出几种代码. 代码: 两个数组: #include ...

  10. 个人永久性免费-Excel催化剂功能第67波-父子结构表转换添加辅助信息之子父关系篇

    Excel作为一款数据领域的万物互联工具,连接一切外部的多种多样的数据源.将数据带到Excel的环境中,再进行数据处理.转换.统计分析等工作,是众多表哥表姐们每天都在经历的事情.能最快速将其他来源数据 ...