如何制作点状霓虹边框？

Question

如何制作点状霓虹边框？

5

    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>

我该如何让它成为一个点状的形式，就像这样：

- uitwaa

3

如果你需要做一些非常复杂的事情，可以查看 border-image。 - ajm

这可以帮助你：http://codepen.io/luclemo/pen/xbMdEx - Black Sheep

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Frederick Jaime · 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

- Rion Williams · Answer 2

你可以尝试在你的 .wrapper 类中添加 border-style: dotted 样式：

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

这可以在这个例子中看到，渲染出来的结果可能类似于以下内容：

这并不是完美的，甚至不够优雅，但它与您的目标图像有些相似。您最好使用像this one这样的示例，它严重依赖CSS，但会生成非常漂亮的霓虹灯效果（不包括点）：

- satya · Answer 3

请尝试这个：

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