css - 在 CSS3 中以径向渐变增加圆的大小

Question

我的渐变有以下 CSS 规则:

background-image: radial-gradient(circle at top right, rgb(237, 241, 254), rgb(195, 253, 237));

我只是想知道是否可以以某种方式增加包含第一种颜色的圆圈的大小。颜色似乎只限于一小块区域。这可能吗？

干杯

Answer 1

我可能会为您找到解决方案，请查看两个片段:

第一个片段只是为了比较:

div {
  background: rgb(173, 217, 228);
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(173, 217, 228, 1)), color-stop(75%, rgba(217, 237, 242, 1)), color-stop(100%, rgba(247, 251, 252, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 75%, rgba(247, 251, 252, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#add9e4', endColorstr='#f7fbfc', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  height: 400px
}

<div></div>

右侧/左侧有一个更大圆圈的第二个片段 - 顶部/底部

div {
  background: rgb(173, 217, 228);
  /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(173, 217, 228, 1)), color-stop(60%, rgba(217, 237, 242, 1)), color-stop(100%, rgba(247, 251, 252, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(173, 217, 228, 1) 0%, rgba(217, 237, 242, 1) 60%, rgba(247, 251, 252, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#add9e4', endColorstr='#f7fbfc', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  height:400px;
}

<div></div>

第一段和第二段的区别在于位置:

• 第一个有 75% 或 color-stop(75%
• 第二个有 60% 或 color-stop(60%