The cause of this writing is a day in the group, said the students under the cock, use a negative outline-offset achieve a plus sign. Ok? I'll be curious to try the hands-down, in the end is how to achieve a negative outline-offset plus sign it?
Use negative outline-offset realized plus
Suppose we have such a simple structure:
<div></div>
div {
width: 200px; height: 200px;
outline: 20px solid #000;
outline-offset: 10px;
}
Modification outline-offset to an appropriate negative value, at the right time, outline the border will be indented to a plus sign.
After some attempts to modify the above div outline-offsetis -118px.
div {
width: 200px; height: 200px;
outline: 20px solid #000;
outline-offset: -118px;
}
Add animation, something like this:
CodePen Demo - Use outline achieve plus
Very interesting, I tried a lot of different situations and, finally, a simple rule, a plus there are some simple restrictions to be used to generate a negative outline-offset:
- Containers have to be a square
- outline border width itself not be too small
- Outline-offset in the range of x is negative: - (+ half of the half width of the container outline width) <x <- (+ half the width of the container outline width)
After this case, I thought, CSS properties can be negative where there are many. It is most familiar margin is negative, use a negative marign, can be used to achieve a similar multi-column layout contour, centered vertically and the like. That there are no other interesting tips it negative?
Below to re-introduce some of the negative CSS interesting usage scenarios.
Unilateral projection
Let me talk about unilateral projection, on box-shadow, most of the time, we are using it to generate a projection on both sides, or four sides of a projection. as follows:
OK, then if you want to generate a projection on one side of it?
Let's look at the use of defined box-shadow:
{
box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
}
In box-shadow: 1px 2px 3px 4px #333 an example, the meaning of four values respectively, x offset direction, y direction offset value, the blur radius, the radius expansion.
Here's a small tip radius expansion can be negative.
Continue, if the shadow blur radius, consistent with a negative expansion radius, then we will not see any shadows, since the resulting shadows will be included under the original elements, unless it is set to a direction of offset. So this time, we are given a direction offset value can be realized unilateral projection:
CodePen Demo - css unilateral projection
Use scale (-1) to achieve inversion
In general, we want to achieve a 180 ° flip element, we will use transform: rotate(180deg), there is little skill, use transform: scale(-1) can achieve the same effect. See a 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 订阅收藏。
If you have any questions or suggestions, you can interact more, original articles, writing is limited, ignorant, if the text is not correct place, Wan Wang told.