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

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

试试这个

.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

请检查一下

也检查一下这个

---

检查此项并让我知道这是您想要的吗？

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

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

下面片段中的渐变与所提供的图像不完全吻合，但您可以理解

div{ 高度：200px； 宽度：150px； 边框：1px实心； 边界半径：12px； 背景：底部线性梯度，rgba0,0,0,0.4，rgba0,0,0.7，径向梯度在-40%-50%，rgba0,0,0,0.4 50%，rgba0,0,0,0.7 50%； 背景大小：180%200%； }

---

看看OP询问的径向渐变在哪里？需要注意的关键是渐变必须有alpha小于1的颜色才能显示较低层的颜色。或者设置限制此渐变覆盖区域的背景大小，并将“重复”设置为false。仅为完整起见：-非常正确@VAL。我指的更多的是从一个渐变叠加到另一个角度：这真是太棒了！解释得很好，非常有用。我没有找到这方面的例子。@SoBiT:对不起，我遗漏了关键部分。它们是从右侧读取的，因此右侧的第一个值是底部。所以它是背景：从前面到后面。不，两种渐变的alpha值都不必小于1，只有顶部的渐变才需要。如果你想看看我是如何实现的，请看这里：

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