多彩流动边框演示
<style>.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
#bbox { margin: auto; width: 400px; height: 200px; overflow: hidden; display: grid; place-items: center; position: relative; }
#bbox::before, #bbox::after { position: absolute; content: ''; }
#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>
<h2>代码：</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2">#bbox {</cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">margin:</span> auto;</cl-cd>
<cl-cd data-idx="4"> <span class="tBlue">width:</span> 400px;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">height:</span> 200px;</cl-cd>
<cl-cd data-idx="6"> <span class="tBlue">overflow:</span> hidden;</cl-cd>
<cl-cd data-idx="7"> <span class="tBlue">display:</span> grid;</cl-cd>
<cl-cd data-idx="8"> <span class="tBlue">place-items:</span> center;</cl-cd>
<cl-cd data-idx="9"> <span class="tBlue">position:</span> relative;</cl-cd>
<cl-cd data-idx="10">}</cl-cd>
<cl-cd data-idx="11">#bbox::before, #bbox::after {</cl-cd>
<cl-cd data-idx="12"> <span class="tBlue">position:</span> absolute;</cl-cd>
<cl-cd data-idx="13"> <span class="tBlue">content:</span> <span class="tMagenta">''</span>;</cl-cd>
<cl-cd data-idx="14"> <span class="tBlue">z-index:</span> -1;</cl-cd>
<cl-cd data-idx="15">}</cl-cd>
<cl-cd data-idx="16">#bbox::before {</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">width:</span> 460px;</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">height:</span> 460px;</cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">background:</span> linear-gradient(red, green, orange, blue);</cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">border-radius:</span> 50%;</cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">animation:</span> rot 4s linear infinite;</cl-cd>
<cl-cd data-idx="22">}</cl-cd>
<cl-cd data-idx="23">#bbox::after {</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">background:</span> silver;</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">inset:</span> 4px;</cl-cd>
<cl-cd data-idx="26">}</cl-cd>
<cl-cd data-idx="27">@keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="28"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="29"> </cl-cd>
<cl-cd data-idx="30"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"bbox"</span>><<span class="tDarkRed">/div</span>></cl-cd>
</div>
<h2>效果：</h2>
<div id="bbox">
<button id="btnChg" type="button" value="1" style="z-index: 1;">现形</button>
</div>
<script>
(function() {
btnChg.onclick = () => {
bbox.style.overflow = ['hidden','visible'];
btnChg.value = Math.abs(btnChg.value - 1);
btnChg.textContent = ['美容','现形'];
};
})();
</script>
本帖最后由 马黑黑 于 2024-6-5 19:59 编辑
说明：
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 的尺寸要大于宿主元素尺寸若干，以确保其可以完整覆盖宿主元素。
这个现形好，更容易看出这个边框是怎么来的了{:4_173:} 马黑黑 发表于 2024-6-5 19:55
说明：
z-index: -1; 的设置在很多复杂环境下会出现问题，而 ::after 伪元素又额外霸道，因此上面的演示 ...
这个#inner不需要设置400和200的宽高？可以直接得到#bbox的宽高么？ 这个在转角的地方很顺畅了{:4_204:} 我看见的是彩色转盘效果，手机欣赏的 小辣椒 发表于 2024-6-5 20:42
我看见的是彩色转盘效果，手机欣赏的
{:4_190:} 红影 发表于 2024-6-5 20:34
这个现形好，更容易看出这个边框是怎么来的了
原形毕露 红影 发表于 2024-6-5 20:39
这个在转角的地方很顺畅了
均匀的 红影 发表于 2024-6-5 20:38
这个#inner不需要设置400和200的宽高？可以直接得到#bbox的宽高么？
留点边框：边框是透视弄出来的 感觉这种能直观演示的小工具特别好。、
名字起得特别好，美容和现形。。
跟美颜和素颜差不多。。{:4_170:} 南无月 发表于 2024-6-5 21:07
感觉这种能直观演示的小工具特别好。、
名字起得特别好，美容和现形。。
跟美颜和素颜差不多。。{:4_170: ...
{:4_172:} 马黑黑 发表于 2024-6-5 21:04
原形毕露
原形还挺好看的呢{:4_173:} 马黑黑 发表于 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
原形还挺好看的呢
可以随意设计色彩。除了线性渐变，还可以考虑使用径向渐变、角向渐变，效果会不一样。渐变的颜色界限也可以重新定义，也会非常好看 不知道我能用上否{:4_203:} 马黑黑 发表于 2024-6-5 21:22
{:4_170:}本来想的就是这个吧
页:
[1]
2