霓虹灯样式CSS左右边框

Question

方法

我有一个按以下样式分为左右两边的代码：

我想通过添加如下所示的霓虹灯效果来转换边缘： （我记得这是一个蒙太奇的油漆）：

问题

我已经尝试过，但是已经获得了（最相似的版本）：

问题

  

有人对实现相似或相同的效果有想法吗？

谢谢！

代码

#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伪元素，则也可以使用它们的边框来产生霓虹效果。这是我想出的：

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

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

顺便说一句，您不应在感叹号之前放置空格

Answer 2

尝试一下

#DivNormal {
    border-radius: 15px;
    border-right: 6px solid #8f0005;
    border-left: 6px solid #8f0005;
    align-content: center;
    align-items: center;
    text-align:center;
    margin: 0.5em !important;
    padding: 0.5em !important;
}
#DivNeon{
    position:relative;
    padding:15px;
    border:5px solid red;
    border-radius:20px;
    border-top:0px solid red;
    border-bottom:0px solid red;
    text-align:center;
    background:#FFB8B8;
}
#DivNeon:before {
    content:"";
    display:block;
    position:absolute;
    z-index:1;
    top:2px; 
    left:5px;
    right:5px; 
    bottom:2px;
    border-radius:20px;
    border-right:6px solid red;
    border-left:6px solid red;
}
#DivNeon:after {
    content:"";
    display:block;
    position:absolute;
    z-index:1;
    top:2px; 
    left:2px;
    right:2px; 
    bottom:2px;
    border-radius:20px;
    border-right:6px solid #8F0005;
    border-left:6px solid #8F0005;
}

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