如何製作點綴的霓虹燈邊框？

我做了一個霓虹邊界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>

我怎樣才能使一個點一個是這樣的：

來源

2016-04-07 uitwaa

你可能想看看[邊框圖像]（https://developer.mozilla.org/en-US/docs/Web/CSS/border-image），如果你想做一些非常複雜的事情。 – ajm

這可以幫助你：http://codepen.io/luclemo/pen/xbMdEx – aldanux

你可以嘗試添加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可以看出，並將渲染類似如下：

它並不完美，甚至優雅，但它有點像你的目標圖像。

來源

2016-04-07 14:20:00

不，這是行不通的。它給出了黑點，而不是將整個邊界轉換爲點 – uitwaa

聽起來你會更好地使用'border-image'風格，正如我的編輯所暗示的那樣。我建議使用像[這個]（http://border-image.com）這樣的生成器，它可以讓你得到你正在尋找的模式。 –

謝謝，但你知道任何其他方式比邊界圖像？我可以做出什麼樣的改變來包裝以獲得理想的結果？ – uitwaa

請試試這個：

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

來源

2016-04-07 14:24:40 satya

不起作用：/ – uitwaa

最好的方式，您可能會使用類似this one，在很大程度上依賴於CSS但會產生一個非常好的霓虹燈效果（沒有點）的一個例子會更好我能想到的是通過使用邊框圖像（我相信某人在之前的回答中提到過），您將不得不根據自己的喜好調整圖像，但這可能是最好的方法。這裏是一個例子：

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

來源

2017-09-11 19:45:44

如何製作點綴的霓虹燈邊框？

回答

相關問題