Wie macht man eine gepunktete Neongrenze?

Question

Ich habe eine Neon-Grenze 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>

gemacht Wie kann ich es machen eine punktierte man etwas wie folgt aus:

Answer 1

Sie könnten versuchen, die border-style: dotted Stil mit denen Sie Ihre .wrapper Klasse:

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

Dies bietet Ihnen möglicherweise nicht genau den Stil, den Sie suchen, aber denken Sie daran, dass Sie, wenn Sie mit einigen komplexen Rahmenstilen umgehen möchten, besser den Stil border-image verwenden sollten. Sie können sogar use an online generator like the one seen here geben Ihnen eine Vorstellung davon, wie Ihre Grenze aussehen wird.

Wenn Sie nichts dagegen hatte ziemlich viel HTML Hinzufügen und wollte nicht die border-image Ansatz verwenden, könnten Sie so etwas wie dies umzusetzen:

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

, die in this example zu sehen und machen würde etwa wie folgt:

es ist nicht perfekt oder sogar elegant, aber es ähnelt ein wenig Ihre Zielbild. Sie könnten besser sein, ein Beispiel wie this one verwenden, die auf CSS stützt sich stark, sondern erzeugen einen wirklich schönen Neon-Effekt (ohne die Punkte):

Answer 2

Bitte versuchen Sie dies:

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

Answer 3

besten Weg, Ich kann daran denken, ist mit einem Bild Rand (ich glaube, jemand erwähnte, dass in einer früheren Antwort), müssen Sie Bild nach Ihren Wünschen zu optimieren, aber dies kann der beste Ansatz sein. hier ist ein Beispiel:

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; 

Sie die Grenze in Aktion unten sehen können:

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

hier gepunktete Version: 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