投影效果

Question

我正在尝试像投影那样获得自定义效果。只有颜色不是一种纯色而是一种图案。

参见示例图片：

我可以通过投影获得纯色，但是可以得到这个结果吗？

Answer 1

  

如果您愿意，可以指定以逗号分隔的多个效果。

box-shadow

但我还建议您使用:after并对其应用background-image: linear-gradient()

Answer 2

https://jsfiddle.net/zjymfubo/1/

<div class="stripe"></div>

.stripe {
  height:20px;
  width:300px;
  position: relative;
  background-color: red;
}
.stripe:after {
  content: '';
  height:20px;
  width:300px;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index:-1;
  color: white;
  background: repeating-linear-gradient(
    -45deg,
    #606dbc,
    #606dbc 5px,
    #465298 5px,
    #465298 10px
  );
}

Answer 3

您可以使用CSS渐变来实现此效果：

<div class="container"></div>

.container {
  width: 250px;
  height: 125px;
  position: relative;
  background: white;
}
.container::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
background: repeating-linear-gradient(
  -45deg,
  orange,
  orange 5px,
  white 5px,
  white 10px
);
  z-index: -1;
}

这是一个Codepen示例。

Answer 4

https://codepen.io/dakata911/pen/VyZdpV

.box {
  width: 200px;
  height: 100px;
  background: #000;
  position: relative;
}

.box:after {
  content: '';
  width: 200px;
  height: 100px;
  position: absolute;
  left: 10px;
  top: 10px;
  background: red;
  z-index: -1;
}

Answer 5

使用：在

之后

＆＃13;

＆＃13;

    .shadow{
      height:50px;
      width:300px;
      position: relative;
      background-color: #fafafa;
    }
    .shadow:after {
      content: '';
      height:50px;
      width:300px;
      position: absolute;
      left: 6px;
      top: 6px;
      z-index:-1;
      color: #fff;
      background: repeating-linear-gradient(
        -45deg,
        #fff,
        #fff 5px,
        yellow 5px,
        yellow 10px
      );
    }

＆＃13;

<div class="shadow"></div>

＆＃13;

＆＃13;

＆＃13;