Question

我试图达到如图所示的蓝绿色边框

正如你可以看到的，这里的边界没有一致的图案，它在随机位置被打破/褪色。如果不是确切的话，我想拥有最接近的外观。

CSS可以实现吗？如果没有，任何替代方案都可以实现。

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

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

我找到了一些边框here，大部分都在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)允许您指定颜色并为其指定一些不透明度，因此您可以创建一些渐弱效果

CSS中的褪色边框效果损坏

4 个答案: