如何制作虚线霓虹边框？

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: solid;
border-width: 27px;
-moz-border-image: url(https://i.imgur.com/akKZqkx.png) 27;
-webkit-border-image: url(https://i.imgur.com/akKZqkx.png) 27;
-o-border-image: url(https://i.imgur.com/akKZqkx.png) 27;
border-image: url(https://i.imgur.com/akKZqkx.png) 27 fill;

您可以在下面看到正在运行的边框：

http://border-image.com/#%7B%22src%22%3A%22https%3A%2F%2Fi.imgur.com%2FakKZqkx.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A%5B0%2C0%2C0%2C0%5D%2C%22imageOffset%22%3A%5B27%2C27%2C27%2C27%5D%2C%22fill%22%3Atrue%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22round%22%2C%22round%22%5D%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Afalse%7D

这里是虚线版本： http://border-image.com/#%7B%22src%22%3A%22https%3A%2F%2Fi.imgur.com%2FWJEmP3v.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A%5B0%2C0%2C0%2C0%5D%2C%22imageOffset%22%3A%5B27%2C27%2C27%2C27%5D%2C%22fill%22%3Atrue%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22repeat%22%2C%22repeat%22%5D%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue%7D

Answer 2

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

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

这可能无法为您提供所需的样式，但请记住，如果您想处理一些复杂的边框样式，最好使用border-image 样式。你甚至可以use an online generator like the one seen here 告诉你你的边框会是什么样子。

如果您不介意添加大量 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>

可以在this example 中看到，并且会呈现如下内容：

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

Answer 3

请试试这个：

.wrapper {
    border: 6px dotted #0cd808;
}