css的这个属性还可以这么用! 你可能不知道的负值技巧和细节
使用 outline-offset 属性实现加号
假设有这么一个初始代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin-left: 100px;
margin-top: 100px;
padding: 0;
width: 200px;
height: 200px;
background-color: green;
outline: 20px solid #000;
outline-offset: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
其效果如下:
image.png
然后再把这个outline-offset属性的值改为-118px,那么就会把边框变成一个加号
当然我这里为了效果显著一些,我加了一个动画效果来显示,如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin-left: 100px;
margin-top: 100px;
padding: 0;
width: 200px;
height: 200px;
background-color: green;
outline: 20px solid #000;
animation: move 3s infinite;
}
@keyframes move {
0% {
outline-offset: 10px;
}
100% {
outline-offset: -118px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
其效果如下:
css1.gif
<font color="yellow">使用outline-offset做加号的总结</font>
我觉得这个很有意思,在这里我试了很多次,在这里我总结了一下使用outline-offset属性负值的条件：
- 容器必须是个正方形
- outline 边框本身的宽度不能太小
- outline-offset 负值 x 的取值范围为: -(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度)
在这个例子后，我又在想，CSS 属性可以取负值的属性和地方有很多,也有许多意想不到的效果。大家最为熟知的就是负margin，使用负的 marign，可以用来实现类似多列等高布局、垂直居中等等。那还有没有其他一些有意思的负值使用技巧呢？
下文就再介绍一些 CSS 负值有意思的使用场景。
使用 scale(-1) 实现翻转
通常，我们要实现一个元素的 180° 翻转，我们会使用 transform: rotate(180deg)，这里有个小技巧，使用 transform: scale(-1) 可以达到同样的效果。看个 Demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.g_container {
position: absolute;
margin: 100px 0 0 500px;
}
.item {
width: 100px;
height: 100px;
background-color: green;
position: relative;
border-radius: 50%;
}
.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) ;
}
}
</style>
</head>
<body>
<div class="g_container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
看看效果：
css2.1.gif
当然,如果想要让三个球同时运动,去掉这个延迟,那么可以改成这样的代码:
.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;
}
其效果我就不说了,就是同时运动,可参照上面的那个效果
负值 margin
负值 margin 在 CSS 中算是运用的比较多的，元素的外边距可以设置为负值。
在 flexbox 布局规范还没流行之前，实现多行等高布局还是需要下一番功夫的。其中一种方法便是使用正 padding 负 margin 相消的方法。
有如下一个布局：
image
左右两栏的内容都是不确定的，也就是高度未知。但是希望无论左侧内容较多还是右侧内容较多，两栏的高度始终保持一致。
OK，其中一种 Hack 办法便是使用一个很大的正 padding 和相同的负 margin 相消的方法填充左右两栏：
.left {
...
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right {
...
padding-bottom: 9999px;
margin-bottom: -9999px;
}
可以做到无论左右两栏高度如何变化，高度较低的那一栏都会随着另外一栏变化。
总结一下
除了这些,还有很多的属性,例子没有列出来(因作者的水平和时间有限)，例如：
- 使用负 marign 实现元素的水平垂直居中
- 使用负 marign隐藏列表 li 首尾多余的边框
- 使用负 text-indent 实现文字的隐藏
- 使用负的 z-index 参与层叠上下文排序
还有一些很深奥的，譬如张鑫旭大大在 CSS 大会上分享的，利用负的 opacity 在 CSS 中实现了伪条件判断，配合 CSS 自定义属性，使用纯 CSS 实现 360° 的饼图效果：
-
第五届CSS大会主题分享之CSS创意与视觉表现
另外,我想说一下,css虽然简单,但是他的功能真的很强大,强大到只有你做不到的,没有你想不到的
多创新,多动手,发现编程世界的更多的乐趣和奥秘.
最后的总结
额，即使css属性的负值在很多时候很有用,能开阔您对代码的新的理解，但是在某些时候也会带来很多的麻烦,也就是使用的场景,在使用它的时候要注意一下。有的时候看到这些代码不得不好好捋一捋才能缓过神来，再感叹一句，原来如此。
如果有其他更好的更易理解的实现方式，具体使用实现的时候应该好好权衡一下。
好了，本文到此结束，希望对你有帮助 :)
注:如果本文有什么错误的话,也欢迎大家评论,讨论哦,知识最重要嘛.
最最后,还希望各位爱好web前端,或者是看了我的文章而喜欢web编程的小伙伴们可以给个关注,不迷路哦.我会不断更新关于web前端这块的所有知识,不只是css.可以一起讨论,一起学习嘛.
当然,最后还希望大家进入我的web前端交流群哦(qq),大家一起可以讨论交流.有什么问题,疑问,都可以在群里发起.只有多个思想的碰撞,才会得到一个正确,甚至比正确更正确的一个"答案(好处)".
进群的小伙伴们可以领取一份资料哦,包括编辑器,电子书籍,还有前端项目yuan码哦
1.PNG
2.PNG
3.PNG
欢迎大家加入哦,这是一个新qun,以前的qun满了(直接点击这个链接,如果不行的话,或者直接加号) 1055351817
