html - NEON 样式CSS左右边框

方法

我有一个代码，分为以下样式的左右边缘:



我想通过添加如下的 NEON 效果来转换边缘:
(我记得那是油漆蒙太奇):



问题

我已经尝试过，但是已经获得了(最相似的版本):



题



谢谢 !! 😃

码

#DivNormal {
    border-radius: 15px;
    border-right: 5px solid #8f0005;
    border-left: 5px solid #8f0005;
    align-content: center;
    align-items: center;
    text-align:center;
    margin: 0.5em !important;
    padding: 0.5em !important;
}
#DivNeon {
    border-radius: 15px;
    border-right: 5px solid #8f0005;
    border-left: 5px solid #8f0005;
    align-content: center;
    align-items: center;
    text-align:center;
    margin: 0.5em !important;
    padding: 0.5em !important;
    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7), 0px 0px 0px 5px red, 0px 0px 0px 3px red inset, 0px 0px 60px rgba(255, 0, 0, 0.5), 0px 0px 60px rgba(255, 0, 0, 0.5) inset;

}

<div id="DivNormal">Hello World !!</div>
<hr>
<div id="DivNeon">Hello World !!</div>

最佳答案

仅通过样式设置元素来解决此问题可能是不可能的。因此，如果不需要::before和::after伪元素，则也可以使用它们的边框来产生 NEON 效果。这是我想出的:

#normal {
    border-radius: 15px;
    border-right: 5px solid #8f0005;
    border-left: 5px solid #8f0005;
    align-content: center;
    align-items: center;
    text-align: center;
    margin: 0.5em !important;
    padding: 0.5em !important;
}

#neon {
    position: relative;
    border-radius: 15px;
    border-right: 5px solid #8f0005;
    border-left: 5px solid #8f0005;
    align-content: center;
    align-items: center;
    text-align: center;
    margin: 5.5em !important;
    padding: 0.5em !important;
    box-shadow: 0px 0px 60px rgba(255, 0, 0, 0.5), 0px 0px 60px rgba(255, 0, 0, 0.5) inset;
}

#neon::before {
    top: 0;
    left: -9px;
    bottom: 0;
    right: -9px;
}

#neon::after {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#neon::after,
#neon::before {
    content: "";
    position: absolute;
    display: block;
    border-radius: 15px;

    border-right: 4px solid red;
    border-left: 4px solid red;
}

<div id="normal">Hello World !!</div>
<hr>
<div id="neon">Hello World !!</div>

我增加了 NEON div周围的边距，只是为了使其更易于查看，这显然是可选的。如果您不喜欢它的外观，仍然可以尝试调整位置和边框大小值。

顺便说一句，您不应该在感叹号前加上空格😉

关于html - NEON 样式CSS左右边框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50966871/