背景线性渐变右-上

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>

你还可以控制每边的size/position：

.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>

背景线性渐变右-上

Background linear-gradient right - top

html

css

linear-gradients