中心在元素外部的多重渐变和径向渐变

Question

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

Answer 1

试试这个

.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 让我知道这是你想要的

Answer 2

绝对可以向一个元素添加多个渐变（甚至是线性渐变和径向渐变的组合），方法是像下面的代码片段一样以逗号分隔的格式提供它们。首先指定的渐变（从右侧开始）形成最底层，而最后指定的渐变位于顶部。需要注意的关键是渐变（在顶部）必须具有 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>

中心在元素外部的多重渐变和径向渐变

Multiple gradients and radial gradient with center outside of the element

css

linear-gradients

radial-gradients