Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/jquery-ui/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何在CSS3中获得旋转椭圆渐变?_Css_Gradient_Ellipse - Fatal编程技术网

如何在CSS3中获得旋转椭圆渐变?

如何在CSS3中获得旋转椭圆渐变?,css,gradient,ellipse,Css,Gradient,Ellipse,我试图得到这个渐变背景(用Illustrator制作): 但我得到的只是: 其CCS3代码如下: background: radial-gradient(ellipse farthest-corner at 5% 5%, #B90000, #2B0000); 如何获得所需的背景?您可以将背景放置在旋转的伪元素之前 我通过反复试验得出了比例,我相信有一种更有效的方法: div { position: relative; overflow: hidden; width: 600px

我试图得到这个渐变背景(用Illustrator制作):

但我得到的只是:

其CCS3代码如下:

background: radial-gradient(ellipse farthest-corner at 5% 5%, #B90000, #2B0000);

如何获得所需的背景?

您可以将背景放置在旋转的
伪元素之前

我通过反复试验得出了比例,我相信有一种更有效的方法:

div {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 300px;
  border: 1px solid black;
}

div::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 250%;
  height: 250%;
  top: -40%;
  left: -50%;
  background: radial-gradient(ellipse 30% 20% at 30% 50%, #B90000, #2B0000);
  transform: rotate(30deg);
}