如何制作点状霓虹边框？

Question

我做了一个霓虹边框https://jsfiddle.net/cf3cec6c/

    body{background:black;}
    h1 {
        color: white;
    }
    .wrapper{
    position: reltive;
     z-index: 999;             
        border:1px solid red;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 10px;
       
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    
      border: 3px solid #0cd808;
     box-shadow: 0 0 1px #b3ff51, 0 0 2px #b3ff51, 0 0 6px #b3ff51, 0 0 12px #b3ff51, inset 0 0 1px #b3ff51, inset 0 0 2px #b3ff51, inset 0 0 6px #b3ff51, inset 0 0 12px #b3ff51;
    
    }

    <div class="wrapper">
      <h1> hello hello hello hello
        hello hello hello hello
        hello hello hello hello
        hello hello hello hello
        <br>
         hello hello hello hello
        hello hello hello hello
        hello hello hello hello
        hello hello hello hello
        <br>
         hello hello hello hello
        hello hello hello hello
        hello hello hello hello
        hello hello hello hello
      </h1>
    </div>

我怎样才能使它成为一个像这样的虚线：

Answer 1

您可以尝试将border-style: dotted样式添加到您的.wrapper班级中：

.wrapper{
    /* omitted for brevity */
    border-style: dotted;
}

这可能无法为您提供所需的确切样式，但请记住，如果您想处理一些复杂的边框样式，最好使用该border-image样式。您甚至可以使用像这里看到的那样的在线生成器来让您了解边框的外观。

如果您不介意添加大量 HTML 并且不想使用该border-image方法，您可以实现如下所示的内容：

<div class='border-outer'>
   <div class='border-inner'>
      <div class='content'>
          This is a test
      </div>
   </div>
</div>
<style type='text/css'>
    .border-outer {
        outline: 5px solid red
    }
    .border-inner {
        background: red;
        border: 5px dotted #fff;
    }
    .content {
       background: #000; 
       color: #FFF;
       height: 80px;
       padding: 10px;
       border: 5px solid red;
    }
</style>

在此示例中可以看到，它将呈现如下所示的内容：

它绝不是完美的，甚至不优雅，但它有点类似于您的目标图像。您可能最好使用像这样的示例，该示例严重依赖于 CSS，但会生成非常漂亮的霓虹灯效果（无点）：