Noktalı neon kenarlık nasıl oluşturulur?

Question

Bir neon kenarlıkla https://jsfiddle.net/cf3cec6c/

yaptık

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>

bunun böyle noktalı bir şey nasıl yapabilirim:

Answer 1

Sen hiç border-style: dotted stil eklemek deneyebilirsiniz senin .wrapper sınıfı:

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

Bu, tam olarak aradığınız stili sağlayamayabilir, ancak bazı karmaşık kenarlık stillerini işlemek istiyorsanız, bunun yerine border-image stilini kullanmanın daha iyi olabileceğini unutmayın. Sınırınızın neye benzeyeceği hakkında bir fikir vermek için use an online generator like the one seen here numaralı telefonu bile alabilirsiniz. HTML biraz ekleme ve border-image yaklaşım kullanmak istemediğini aldırmadı Eğer

, böyle bir şey uygulamak olabilir: this example görülebilir ve kılabilecek

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

aşağıdaki gibi bir şey: hayır mükemmel ve hatta zarif anlamına gelir, ama biraz hedeflenen görüntüyü andıran tarafından

öyle.

Answer 2

bu deneyin:

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

Answer 3

iyi yolu Sen ağır gerçekten güzel neon etkisi (sans nokta) CSS dayanır ama üretir this one gibi bir örnekle daha iyi olabilir Düşündüğüm bir sınır görüntüsü kullanarak (birinin daha önceki bir cevapta bahsettiğine inanıyorum), beğeninize göre görüntüyü düzeltmeniz gerekecek ama bu en iyi yaklaşım olabilir. Aşağıdaki eylem sınır görebilirsiniz

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; 

: Burada

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

noktalı versiyonu olan: 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

Sen kontrol etmek isteyebilirsiniz