CSS中残破的褪色边框效果

Question

我正在尝试实现如图所示的蓝绿色边框

如您所见，这里的边框没有一致的图案，它在随机位置处被破坏/褪色。 如果不确切，我想找一个最接近的人。

CSS可以做到这一点吗？ 如果没有，那么任何替代方法都可以实现。

有一个border-image属性，但是为此，我需要这样的图像。 我不知道photoshop。 因此，唯一的选择是CSS或使用图像。 我也希望能找到这样的边界图像的建议。

https://jsfiddle.net/2oeb569z/1/

HTML：

<div class="container">
  <div class="wrapper">
    <div class="content">

    </div>
  </div>
</div>

CSS：

.container {
  margin: auto;
  margin-top: 20px;
  width: 400px;
  height: 300px;
  background: #131313;
  position: relative;
}

.wrapper {
  position: absolute;
  margin-top: 30px;
  margin-left: 20px;
  width: 330px;
  height: 230px;
  background: white;
  padding: 10px 15px;
}

.content {  
  height: 90%;
  border: 0px solid teal;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(teal), to(transparent));
  background-image: -webkit-linear-gradient(teal, transparent);
  background-image: -moz-linear-gradient(teal, transparent), -moz-linear-gradient(teal, transparent);
  background-image: -o-linear-gradient(teal, transparent), -o-linear-gradient(teal, transparent);
  background-image: linear-gradient(teal, transparent), linear-gradient(teal, transparent);
  -moz-background-size: 7px 100%;
  background-size: 7px 100%;
  background-position: 0% 0, 100% 0;
  background-repeat: no-repeat;
}

Answer 1

您可以创建带有一些随机褪色边框图案的图像。 您可以使其足够大以使其适合要具有边框的任何对象。 创建边框时，将裁剪图像。 您还可以在顶部和左侧边框使用单独的图像。

Answer 2

我在这里找到了一些边框，大部分在psd中。

您将必须使用photoshop进行编辑，否则最好的方法是使用photoshop进行自己的编辑。 通过使用边框图像很容易实现这一点。

Answer 3

我使用渐变创建了一个效果，尝试一下，您可以使用效果更好的图像

  #grad1 { height: 200px; width:300px; background: -webkit-repeating-linear-gradient(90deg,#eaeaea,#fbfbfb 7%,#e6e6e6 10%); /* For Safari 5.1 to 6.0 */ background: -o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */ background: -moz-repeating-linear-gradient(90deg,#eaeaea,#fbfbfb 7%,#e6e6e6 10%);/* For Firefox 3.6 to 15 */ background: repeating-linear-gradient(90deg,#eaeaea,#fbfbfb 7%,#e6e6e6 10%); /* Standard syntax (must be last) */ } 

 <!DOCTYPE html> <html> <head> </head> <body> <div id="grad1"></div> </body> </html> 

Answer 4

也许这行得通吗？

border: 2px solid rgba(79, 211, 255, 0.2);

rgba(red, green, blue, hardness)允许您指定颜色并赋予其一定的不透明度，因此您可以创建一些褪色效果