多彩流动边框演示

马黑黑

代码：

<style> #bbox {     margin: auto;     width: 400px;     height: 200px;     overflow: hidden;     display: grid;     place-items: center;     position: relative; } #bbox::before, #bbox::after {     position: absolute;     content: '';     z-index: -1; } #bbox::before {     width: 460px;     height: 460px;     background: linear-gradient(red, green, orange, blue);     border-radius: 50%;     animation: rot 4s linear infinite; } #bbox::after {     background: silver;     inset: 4px; } @keyframes rot { to { transform: rotate(360deg); } } </style>   <div id="bbox"></div>

效果：

现形

马黑黑

说明：

z-index: -1; 的设置在很多复杂环境下会出现问题，而 ::after 伪元素又额外霸道，因此上面的演示并非完美。处理方法是，使用真实元素替代 ::after，绝对定位， HTML调整如下：

<div id="bbox">
    <div id="inner">
        <!-- 帖子内容 -->
     </div>
</div>

id="inner" 元素的CSS代码：

#inner {
    position: absolute;
    background: silver;
    inset: 4px;
}

同时把 ::after 相关的字眼和代码从CSS代码中删掉，把 z-index: -1; 也删掉，保留 ::before 部分的代码：
#bbox::before {
    position: absolute;
    content: '';
    width: 460px;
    height: 460px;
    background: linear-gradient(red, green, orange, blue); border-radius: 50%; animation: rot 4s linear infinite;
}


伪元素 ::before 的尺寸要大于宿主元素尺寸若干，以确保其可以完整覆盖宿主元素。

红影

这个现形好，更容易看出这个边框是怎么来的了

红影

马黑黑 发表于 2024-6-5 19:55
说明：

z-index: -1; 的设置在很多复杂环境下会出现问题，而 ::after 伪元素又额外霸道，因此上面的演示 ...

这个#inner不需要设置400和200的宽高？可以直接得到#bbox的宽高么？

红影

这个在转角的地方很顺畅了

小辣椒

我看见的是彩色转盘效果，手机欣赏的

马黑黑

小辣椒 发表于 2024-6-5 20:42
我看见的是彩色转盘效果，手机欣赏的

马黑黑

红影 发表于 2024-6-5 20:34
这个现形好，更容易看出这个边框是怎么来的了

原形毕露

马黑黑

红影 发表于 2024-6-5 20:39
这个在转角的地方很顺畅了

均匀的

马黑黑

红影 发表于 2024-6-5 20:38
这个#inner不需要设置400和200的宽高？可以直接得到#bbox的宽高么？

留点边框：边框是透视弄出来的

南无月

感觉这种能直观演示的小工具特别好。、
名字起得特别好，美容和现形。。
跟美颜和素颜差不多。。

马黑黑

南无月 发表于 2024-6-5 21:07
感觉这种能直观演示的小工具特别好。、
名字起得特别好，美容和现形。。
跟美颜和素颜差不多。。{:4_170: ...

红影

马黑黑 发表于 2024-6-5 21:04
原形毕露

原形还挺好看的呢

红影

马黑黑 发表于 2024-6-5 21:05
均匀的

是的，被黑黑完美地解决了转角问题呢。

红影

马黑黑 发表于 2024-6-5 21:05
留点边框：边框是透视弄出来的

嗯嗯，知道了。

马黑黑

红影 发表于 2024-6-5 22:25
嗯嗯，知道了。

inset 作为元素属性，应该也理解的吧

马黑黑

红影 发表于 2024-6-5 22:24
是的，被黑黑完美地解决了转角问题呢。

那个，形式不太一样的

马黑黑

红影 发表于 2024-6-5 22:23
原形还挺好看的呢

可以随意设计色彩。除了线性渐变，还可以考虑使用径向渐变、角向渐变，效果会不一样。渐变的颜色界限也可以重新定义，也会非常好看

樵歌

不知道我能用上否

南无月

马黑黑 发表于 2024-6-5 21:22

本来想的就是这个吧