多个渐变和径向渐变，中心位于元素外部

Question

是否可以使用CSS Gradients获得类似的结果？你能在一个div上使用2个渐变吗？径向的可以在div外面有一个中心吗？

Answer 1

绝对可以通过以逗号分隔格式提供元素（即使是线性和径向渐变的组合）来添加多个渐变，如下面的代码段所示。首先指定的渐变（从右侧）形成最底层，而最后指定的渐变位于顶部。需要注意的一点是，渐变（在顶部）必须具有alpha小于1的颜色才能显示较低层中的颜色。

来到问题的第二部分，可以创建径向渐变，使其中心点位于div之外。这可以通过为position指定负值来完成。

以下代码段中的渐变与所提供的图片不符合100％，但您可以理解。

div{
  height: 200px;
  width: 150px;
  border: 1px solid;
  border-radius: 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7)), radial-gradient(ellipse at -40% -50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.7) 50%);
  background-size: 180% 200%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='gradient'></div>

Answer 2

试试这个

.color background: rgba(249,124,102,1);
    background: -moz-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(249,124,102,1)), color-stop(50%, rgba(246,160,147,1)), color-stop(51%, rgba(248,85,63,1)), color-stop(71%, rgba(243,93,73,1)), color-stop(100%, rgba(236,98,85,1)));
    background: -webkit-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
    background: linear-gradient(135deg, rgba(249,124,102,1) 0%, rgba(246,160,147,1) 50%, rgba(248,85,63,1) 51%, rgba(243,93,73,1) 71%, rgba(236,98,85,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f97c66', endColorstr='#ec6255', GradientType=1 );
}

    .rounded_rec {
     width: 150px;
    height: 150px;
    border-radius: 5px;
    border: 1px solid red;
    background-color: black;
  }

HTML

<div class="rounded_rec color">
</div>

请检查此link

同时检查此link

检查此link，让我知道这是你想要的