这个没有图片的背景怎么做？

Question

是否可以制作如图所示的背景渐变。我发现这可以通过径向渐变来完成，但由于某种原因我的渐变是圆形的。也许用图像处理更好？

我怎样才能做到像图片一样清晰的边框。

.block {

  padding: 15px;

  width: 1000px;

  border-radius: 6px;

  font-size: 1.8rem;

  line-height: 2.8rem;

  height: 12.4rem;

  background-color: #F3F5F7;

  border-radius: .6rem;

  background-image:

    radial-gradient(

      circle at bottom right,

      red,

      #ffffff 30%

    );

}

<div class="block">

  <div>some text</div>

</div>

Answer 1

您可以使用两个梯度来近似它：.box {&nbsp; height:300px;&nbsp; background:&nbsp; &nbsp; radial-gradient(130% 140% at 140% 160%,transparent 99%,#f3f5f7 100%),&nbsp; &nbsp; linear-gradient(to top,#f3f5f7,#dadcdd);}<div class="box"></div>