366
个编辑
小第75行：
第75行： − + + − + + − Rainbow Glow+ − | align=center | + − + − <div class="rainbow-glow--wrapper" style="position: relative; width: 8rem; height: 4rem; padding: 4px; box-sizing: border-box;">+ − + − + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + − + − |+ − * The <code>filter</code> property will eliminate inline styles (wish I could use this on the glow layer though) − |}
无编辑摘要
</div>
</div>
<h2>Some effects</h2>
<section>
<h2>Some effects</h2>
<div style="width: 100%">
<div style="width: 100%; display: grid; grid-template-columns: 1fr 1fr auto;">
<div>Rainbow Glow</div>
<div style="display: flex; justify-content: center; margin: 0 2rem;">
<div class="rainbow-glow--wrapper" style="position: relative; width: 8rem; height: 4rem; padding: 4px; box-sizing: border-box;">
<div style="display: flex; justify-content: center; margin: 0 2rem;">
<div
class="rainbow-glow--glow"
<div class="rainbow-glow--glow" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 8px; background-image: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-sizing: border-box;"> </div>
style="
<div class="rainbow-glow--content" style="position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; padding: .5rem 1rem; width: 100%; height: 100%; background-color: #fff; color: #000; border: solid 2px #000; border-width: 2px 3px 4px; border-radius: 6px; box-sizing: border-box;">YOOHOO</div>
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 8px;
background-image: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
box-sizing: border-box;
"
>
</div>
<div
class="rainbow-glow--content"
style="
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
padding: .5rem 1rem;
width: 100%;
height: 100%;
background-color: #fff;
color: #000;
border: solid 2px #000;
border-width: 2px 3px 4px;
border-radius: 6px;
box-sizing: border-box;
"
>
YOOHOO
</div>
</div>
</div>
<div>
* The <code>filter</code> property will eliminate inline styles (wish I could use this on the glow layer though)
</div>
</div>
</div>
</div>
</section>
<section>
<section>