如何在CSS中实现效果（如附图所示）

Question

我想在div框中实现以下效果。什么CSS可以解决问题？预先感谢您的回答！

Answer 1

在CSS3中使用线性梯度函数，代码将像这样+：

.box{
    height: 100px;
    width: 100px;
    background: linear-gradient(to top, blue, white, blue)
}

Answer 2

您可以将CSS3与linear gradient一起使用。像这样：

.demo {
  width: 150px;
  height: 150px;
}
.gradient {
  background: #508cf4; /* Old browsers for fallback */
  background: linear-gradient(to bottom, #508cf4 0%, #ffffff 50%, #508cf4 100%); 
}

<div class="gradient demo"></div>

您也可以在Google上搜索“ css3梯度生成器”以具有GUI。例如cssgradient.io

Answer 3

如第一个答案所述，请使用css渐变，并与圆角半径组合以形成圆角。

.box{
    height: 200px;
    width: 150px;
    background: linear-gradient(to top, #4690ff, #ffffff, #4690ff);
    border-radius:15px 0px 0px 15px;
}

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

Answer 4

您可能会测试运行一些{s {3}}和ColorZilla这样的css渐变工具以使用渐变颜色。

此外，通过将低不透明度径向渐变与线性渐变相结合，您可以获得更丰富的外观，可能更接近原始图像。

.box {
  display: block;
  width: 182px;
  height: 229px;
  background: 
    radial-gradient(ellipse at center, rgba(252,253,255,.2) 54%,rgba(212,229,255,.2) 66%,rgba(212,229,255,.2) 66%,rgba(153,193,255,.2) 79%,rgba(153,193,255,.2) 79%,rgba(57,136,255,.2) 100%), 
    linear-gradient(to top, rgb(57, 136, 255) 0%, rgb(153, 193, 255) 13%, rgb(212, 229, 255) 23%, rgb(252, 253, 255) 43%, rgb(252, 253, 255) 57%, rgb(212, 229, 255) 77%, rgb(153, 193, 255) 87%, rgb(57, 136, 255) 100%);
  border-radius: 16px 0 0 16px;
}

<div class="box"></div>
<p>original <img src="https://i.stack.imgur.com/OJ5Z6.png" /></p>