Question

有人可以告诉我如何为chrome，IE和Mozilla做多个径向渐变。我想要的是右侧的径向渐变，从200px开始，另一个渐变从50％开始，然后是中心底部的渐变。我没有运气创造这个可能有人告诉我如何在一个100％高度的div中做到这一点。我也希望这些渐变只显示从边缘出来的一半圆圈。非常感谢您的帮助。

Answer 1

所以：

占据整个宽度的一个渐变
从右侧偏移200px的一个渐变
一个渐变，是页面高度的一半，覆盖下半部分
所有三个渐变都必须与所有浏览器兼容

正确？这看起来像这样：

＆＃13;

body {
  margin: 0;
}

#grad_full_width {
  height: 150px;
  width: 100vw;
  background: -webkit-radial-gradient(red, green, blue);
  /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(red, green, blue);
  /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(red, green, blue);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(red, green, blue);
  /* Standard syntax (must be last) */
}

#grad_offset_right {
  position: absolute;
  right: 200px;
  top: 0;
  height: 150px;
  width: 100vw;
  background: -webkit-radial-gradient(green, blue, yellow);
  /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(green, blue, yellow);
  /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(green, blue, yellow);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(green, blue, yellow);
  /* Standard syntax (must be last) */
}

#grad_bottom {
  position: absolute;
  bottom: 0;
  height: 50vh; /* 50% of the height */
  width: 100vw;
  background: -webkit-radial-gradient(green, blue, yellow);
  /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(green, blue, yellow);
  /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(green, blue, yellow);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(green, blue, yellow);
  /* Standard syntax (must be last) */
}

＆＃13;

<div id="grad_full_width"></div>
<div id="grad_offset_right"></div>
<div id="grad_bottom"></div>

＆＃13;

您可以通过简单地偏移它们来实现一半圆圈，使其中心位于页面的边缘。

希望这有帮助！：）

具有一定位置的多个径向梯度

1 个答案: