利用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>
其效果如下:
然后再把这个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>
其效果如下:
使用outline-offset做加号的总结
我觉得这个很有意思,在这里我试了很多次,在这里我总结了一下使用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>
看看效果:
当然,如果想要让三个球同时运动,去掉这个延迟,那么可以改成这样的代码:
.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 相消的方法。
有如下一个布局:
左右两栏的内容都是不确定的,也就是高度未知。但是希望无论左侧内容较多还是右侧内容较多,两栏的高度始终保持一致。
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中的 outline-offset 属性实现加号的文章就介绍到这了,更多相关css outline-offset 属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
- 利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效
- iPhone开发之UIScrollView滚动组件的使用(二) 拖线实现按钮控制大图移动利用contentOffset属性
- CSS实现三角形的方法之一--利用 border 属性实现三角形
- 利用css的clear属性实现文字环绕图片效果
- 利用css的before和after属性,实现类似QQ对话框效果
- 利用css换行技术实现加载中动画效果
- 利用Android属性动画实现Banner的原理与实践
- 用css属性实现箭头
- C#借助FieldOffset属性实现共用体与强制类型转换
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析
- 利用JS实现在li中添加或删除class属性
- 利用z-index属性实现网页弹出框
- 一个包含几种动物的小资料库,根据输入的动物属性要求可以输出对应的动物名称;如查询不到应当输出其他语句。利用Java语言实现
- 在ASP.Net中两种利用CSS实现多界面的方法
- 利用CSS计数函数counter()和counters()实现自动计数编号
- 利用Css实现WEB打印分页设置
- ASP.Net中利用CSS实现多界面两法
- 超过单元格长度的文本用省略号表示,利用title属性实现鼠标移上去会显示全文,但有时候只看到一部分
- 利用POPAnimatableProperty属性来实现动画倒计时
- 利用JAVA的动态属性之反射原理实现一个简单AOP容器 - AOP的实现原理分析