在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>

从第1个到第2个片段的区别在于：

• 1st有75%或color-stop(75%
• 2nd有60%或color-stop(60%