利用CSS中的 outline-offset 属性实现加号

前端  /  管理员 发布于 7年前   395

假设有这么一个初始代码:

<!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播放声音的几种技巧方法
    下一条：
    CSS 实现渐变效果小结( linear-gradient线性渐变 和 radial-gradient径向渐变)

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客