背景线性渐变右 - 上

Question

我在将渐变设置为单个 div 时遇到问题。 看一张图片。

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

编辑： 到目前为止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，因为您希望框内有阴影。

堆栈片段

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

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

Answer 2

正如我在上面评论的那样，您可以使用多个渐变，并且应该使用透明颜色而不是白色，这样我们就可以看到它们，因为它们会重叠（您可以使用 background-color 作为白色或简单地将其添加到背景属性最后）

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;
}

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

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

你可以使用更多的渐变和不同的颜色：

.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%);
}

<div class="box">

</div>

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

.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%) ;
}

<div class="box">

</div>