清风细雨楼

利用CSS中的 outline-offset 属性实现加号
网页制作 2024/12/27 佚名
3 1
清风细雨楼 Design By www.eepep.com

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

<!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>

其效果如下:

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

然后再把这个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>

其效果如下:

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

使用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>

看看效果：

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

当然,如果想要让三个球同时运动,去掉这个延迟,那么可以改成这样的代码:

.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 相消的方法。

有如下一个布局：

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

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

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 参与层叠上下文排序

总结

清风细雨楼 Design By www.eepep.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
清风细雨楼 Design By www.eepep.com
www.eepep.com 清风细雨楼
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
清风细雨楼 Design By www.eepep.com