【问题标题】：Border left and right with Neon style css带有霓虹灯样式css的左右边框
【发布时间】：2018-06-21 10:59:05
【问题描述】：

方法

我的代码分为左右边缘，样式如下：

我想通过添加如下所示的霓虹灯效果来转换边缘：（我记得是用颜料蒙太奇）：

问题

我试过但我得到了（最相似的版本）：

问题

是否有人对如何实现相似或相同的效果有想法或想法？

谢谢！！ ????

代码

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

【问题讨论】：

标签： html css sass pug

【解决方案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 周围的边距，只是为了更容易看到，这显然是可选的。如果您不喜欢它的外观，您仍然可以尝试调整位置和边框大小值。

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

【讨论】：

【解决方案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>

【讨论】：