css - 建立一个4 Angular 颜色的CSS3渐变

是否可以在CSS中产生以下渐变:

最佳答案

在你的情况下

方法1:

jsFiddle Demo

div{
overflow: hidden;
background: #f06;
background: linear-gradient(45deg, #fff722, #ff26f9);
min-height: 100%;
width: 256px;
height: 256px;
position: relative;
z-index: 1;
box-shadow: inset -20px 0 38px -18px #ff26f9,inset -3px -13px 65px -18px yellow;
}

div:before,div:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
}
div:before{
    background: red;
    box-shadow: 0 0 140px 64px red;
    z-index:2;
    top: -96%;
left: -72%;
    opacity: 0.8;
}
div:after {
background: white;
z-index: 3;
bottom: -96%;
right: -72%;
box-shadow: 0 0 140px 64px white;
opacity: 1;
border-radius: 100%;
}

方法2:

div{
overflow: hidden;
background: #f06;
background: linear-gradient(45deg, #fff722, #ff26f9);
min-height: 100%;
width:256px;
height:256px;
position:relative;
    z-index:1;
}

div:before,div:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
}
div:before{
    background: red;
    box-shadow: 0 0 140px 64px red;
    z-index:2;
    top: -96%;
left: -72%;
    opacity: 0.8;
}
div:after {
background: white;
z-index: 3;
bottom: -96%;
right: -72%;
box-shadow: 0 0 140px 64px white;
opacity: 1;
border-radius: 100%;
}

jsFiddle Demo

方法3:多个背景:

div{
background: #f06;
background: linear-gradient(45deg, #fff722, #ff26f9),linear-gradient(142deg, transparent, white),linear-gradient(108deg, red, transparent);
min-height: 100%;
width:256px;
height:256px;
position:relative;
    z-index:1;
}

jsFiddle Demo

方法4:伪元素

div{
background: #f06;
background: linear-gradient(45deg, #fff722, #ff26f9);
min-height: 100%;
width:256px;
height:256px;
position:relative;
    z-index:1;
}

div:before,div:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    opacity: 0.8;
}
div:before{
    background: linear-gradient(108deg, red, transparent);
    z-index:2;
    top:0;
    left:0;
}
div:after{
    background: linear-gradient(142deg, transparent, white);
    z-index:3;
    bottom:0;
    right:0;
}

标记:

<div></div>

jsFiddle Demo

方法5:

div{
overflow: hidden;
background: #f06;
background: linear-gradient(45deg, #fff722, #ff26f9);
min-height: 100%;
width:256px;
height:256px;
position:relative;
    z-index:1;
}

div:before,div:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
}
div:before{
    background: linear-gradient(108deg, red, transparent);
    z-index:2;
    top:0;
    left:0;
    opacity: 0.8;
}
div:after {
background: white;
z-index: 3;
bottom: -96%;
right: -72%;
box-shadow: 0 0 110px 54px white;
opacity: 1;
border-radius: 100%;
}

jsFiddle Demo

更新:非常感谢 Ana-Maria Tudor

body{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}

body:before {
  content: '';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  display: block;
  width: 100%;
  height: 600px;
  border-radius: 0%;
  background:
    radial-gradient(circle at 50% 0,
         rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%),
    radial-gradient(circle at 6.7% 75%,
         rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%),
    radial-gradient(circle at 93.3% 75%,
         rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%);
}

jsFiddle Demo

关于css - 建立一个4 Angular 颜色的CSS3渐变，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18452885/