Question

我正在制作自己的网站设计（用于php融合），而我无法想象如何在整个内容周围做条纹边框。更好地看一下图片：

https://greart.sk/uploads/download/preview/0743c0b917b78a5012c15e7c861f5482.png

如果你不知道我的意思，请仔细看看。

https://ctrlv.cz/shots/2018/01/14/08Vu.png

可以通过CSS完成吗？

我尝试了这个，但是不能做条纹边框，也许是通过背景图片重复，或者我不知道：

<div id="content">
  <div class="content">
  </div>
<div>

.content {
  width: 500px;
  height: 200px;
  background-color: red; 
}

#content {
  background-color: black;
  width: 500px;
  height: 200px;
  padding: 10px;
}

Answer 1

你可以考虑一个带有重复线性渐变的伪元素，如下所示：

＆＃13;

body {
  background: url('https://lorempixel.com/g/800/800/');
  margin: 0;
  min-height: 100vh;
}

#content {
  background-color: black;
  width: 500px;
  height: 200px;
  padding: 10px;
  margin: 50px auto;
  position: relative;
}

#content:before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
  z-index: -1;
  background: 
  linear-gradient(-45deg, transparent 45%, #000 45%, #000 55%, transparent 55%) 0 0/10px 10px,
  linear-gradient(-45deg, transparent 45%, #000 45%, #000 55%, transparent 55%) 5px 0px/10px 10px;
  background-color:rgba(255,255,255,0.5);
}

＆＃13;

<div id="content">
<div>

＆＃13;

创造＆＃34;条纹＆＃34;像这样的边界

1 个答案: