html - 你能有背景图片 : linear-gradient( to center. ..);

Question

我有一个带有 background-image: linear-gradient( to bottom, red, blue); 的 div
但我想要 to bottom成为 to center但它不起作用。
赖特，现在看起来像这样

我希望它看起来像这样

有谁知道如何做到这一点请帮助我？

Answer 1

你展示的是一个经典的边框:

.box {
  border:40px solid blue;
  height:50px;
  width:50px;
  background:red;
}

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

但我怀疑您想要褪色，所以您想要的是 radial-gradient

.box {
  height:200px;
  width:200px;
  background:radial-gradient(farthest-side,red,blue);
}

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

或者像下面这样:

.box {
  height: 200px;
  width: 200px;
  background: linear-gradient(to right, blue, red, blue);
  position: relative;
}

.box::before {
  content: "";
  display: block;
  height: 100%;
  background: linear-gradient(blue, red, blue);
  clip-path: polygon(0 0, 100% 100%, 0 100%, 100% 0);
}

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

或者像这样:

.box {
  height: 200px;
  width: 200px;
  background: 
     linear-gradient(to top right   , red, blue) top right,
     linear-gradient(to top left    , red, blue) top left ,
     linear-gradient(to bottom left , red, blue) bottom left,
     linear-gradient(to bottom right, red, blue) bottom right;
  background-size:50% 50%;
  background-repeat:no-repeat;
}

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

还使用 box-shadow

.box {
  height: 200px;
  width: 200px;
  background: red;
  box-shadow: 0 0 50px 35px blue inset;
}

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