如何制作虚线霓虹边框？

Posted 2023-02-22

【中文标题】如何制作虚线霓虹边框？

【英文标题】：How to make a dotted neon border?

【发布时间】：2016-07-28 11:59:10

【问题描述】：

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

    bodybackground: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>

我怎样才能把它变成一个像这样的虚线：

【问题讨论】：

如果你想做一些非常复杂的事情，你可能想看看border-image。

这可以帮助你：codepen.io/luclemo/pen/xbMdEx

【参考方案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

【参考方案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，但会产生非常好的霓虹灯效果（无点）：

【讨论】：

不，这不起作用。它给出黑点而不是将整个边框转换为点

听起来你会更好地使用我的编辑建议的border-image 样式。我建议使用像 this one 这样的生成器，它可以让你得到你正在寻找的模式。

谢谢，但您知道除边框图像之外的其他方法吗？我可以对包装器进行任何更改以获得所需的结果吗？

我用两个例子编辑了我的回复。一个依赖于一些额外的 HTML 来围绕特定元素构建边框，另一个示例将给你一个真正的“霓虹灯”效果，虽然它没有点，但它可能会接近你想要的效果而不诉诸使用border-image。

【参考方案3】：

请试试这个：

.wrapper 
    border: 6px dotted #0cd808;