背景线性渐变右 - 顶部

Question

我在设置渐变到单个div时遇到问题。 看图。

甚至可以将其设置为顶部和右侧？ 谢谢！

EDITED： 到目前为止background: linear-gradient(to left, rgb(240, 240, 240),rgb(255, 255, 255) 3%) ;

Answer 1

您要找的是 box-shadow

box-shadow语法定义为：

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color | inset

在你的情况下，你必须使用inset，因为你想要框内的阴影。

Stack Snippet

＆＃13;

＆＃13;

.shadow {
  height: 100px;
  box-shadow: -4px 4px 10px 0 #eee inset;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

正如我在上面评论的那样，您可以使用多个渐变，您应该使用透明色而不是白色，这样我们就可以看到它们两个因为它们会重叠（您可以使用allwatches : []作为白色，或者只是将它添加到最后的背景属性）

＆＃13;

＆＃13;

background-color

＆＃13;

body {
  background: #ccc;
}

.box {
  height: 200px;
  width: 200px;
  border: 1px solid;
  background: linear-gradient(to left, rgb(40, 40, 40), transparent 3%), linear-gradient(to bottom, rgb(40, 40, 40), transparent 3%);
  background-color: #fff;
}
.box-alt {
  height: 200px;
  width: 200px;
  border: 1px solid;
  background: linear-gradient(to left, rgb(40, 40, 40), transparent 3%),
  linear-gradient(to bottom, rgb(40, 40, 40), transparent 3%),
  white;
}

＆＃13;

＆＃13;

＆＃13;

你可以为每一方提供更多渐变和不同的颜色：

＆＃13;

＆＃13;

<div class="box">
</div>

<div class="box-alt">
</div>

＆＃13;

.box {
 height:200px;
 width:200px;
 border:1px solid;
 background: linear-gradient(to left, rgb(200, 40, 0),transparent 3%),
 linear-gradient(to bottom, rgb(200, 0, 200),transparent 3%),
 linear-gradient(to top, rgb(40, 0, 40),transparent 3%),
 linear-gradient(to right, rgb(40, 200, 0),transparent 3%);
}

＆＃13;

＆＃13;

＆＃13;

您还可以控制每一方的大小/位置：

＆＃13;

＆＃13;

<div class="box">

</div>

＆＃13;

.box {
 height:200px;
 width:200px;
 border:1px solid;
 background: linear-gradient(to left, rgb(200, 40, 0),transparent 3%) 0 50%/100% 50% no-repeat,
 linear-gradient(to bottom, rgb(200, 0, 200),transparent 3%) 40% 0/80% 100% no-repeat,
 linear-gradient(to top, rgb(40, 0, 40),transparent 3%) 80% 0/20% 100% no-repeat,
 linear-gradient(to right, rgb(40, 200, 0),transparent 3%) ;
}

＆＃13;

＆＃13;

＆＃13;