html - 带有 Neon 样式 css 的左右边框

Question

方法

我有一段代码分为左右两边，样式如下:

我想通过添加如下所示的 NEON 效果来转换边缘: (我记得这是一个带颜料的蒙太奇):

问题

我试过了，但我得到了(最相似的版本):

问题

Does anyone have ideas or ideas of how a similar or identical effect could be achieved?

谢谢!! 😃

代码

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

Answer 1

仅通过样式化元素可能无法解决此问题。所以，如果您不需要 ::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 周围的边距只是为了让它更容易看到，它显然是可选的。如果您不喜欢它的外观，您仍然可以尝试调整位置和边框大小值。

顺便说一下，你不应该在感叹号前加空格😉