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样式。您甚至可以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 2

请试试这个：

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

Answer 3

我能想到的最佳方式是使用边框图像（我相信有人在之前的回答中提到过），你必须根据自己的喜好调整图像，但这可能是最好的方法。这是一个例子：

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

如何制作点缀的霓虹灯边框？

3 个答案: