我想让颜色以圆圈的中心来渐变比如把圆圈分四分每一个半圆为一种颜色渐变这个意思该怎么编？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>以圆圈为中心颜色渐变</title>
<style type="text/css">
div {
   width: 400px; height: 400px;
   border-radius: 200px;
   margin: 150px auto;
   background: -webkit-linear-gradient(red, blue);
   background:    -moz-linear-gradient( right red, blue);
   background:      -o-linear-gradient(red, blue);
   background:         linear-gradient( 45deg,red 0%,green 20%, yellow 40%,blue 60%,orange 80%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

weibo_纷纷的想念_0 2017-02-15

源自：CSS3背景与渐变 3-6 线性渐变、角度、结点、透明（1）

收起

2回答

小于飞飞回答被采纳获得+3积分 2017-02-15 18:51:08

你好，试想实现如下效果吗？

思路，HTML有四个div , 每个div完成一个四份之一的圆，然后设置渐变，在通过定位拼在一起呦，希望对你有帮助，祝学习愉快，欢迎采纳。

收起回答

weibo_纷纷的想念_0 提问者 #1

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>以圆圈为中心颜色渐变</title> <style type="text/css"> *{margin:0; padding:0;} .one{ width: 200px; height: 200px; border-radius: 0 0 0 200px ; float: left;margin-top: 200px; background: linear-gradient( -45deg,red 0%,green 20%, yellow 40%,blue 60%,orange 80%);} .two{ width: 200px; height: 200px; border-radius: 0 0 200px 0; float: left;margin-top: 200px; background: linear-gradient( 45deg,red 0%,green 20%, yellow 40%,blue 60%,orange 80%); } .three{ width: 200px; height: 200px; border-radius: 200px 0 0 0; float: left; background: linear-gradient( 45deg,red 0%,green 20%, yellow 40%,blue 60%,orange 80%); } .four{ width: 200px; height: 200px; border-radius:0 200px 0 0; float: left; background: linear-gradient( -45deg,red 0%,green 20%, yellow 40%,blue 60%,orange 80%); } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> </body> </html>

2017-02-15 20:34:36

小于飞飞 2017-02-16 15:07:30

定位不要使用float:left ,使用position或者transform: translate(），达到你想要的效果。

*{margin:0; padding:0;} 
.one{ width: 200px; height: 200px; border-radius: 0 0 0 200px ;margin-top: 200px; background: linear-gradient( -45deg,red 0%,green 20%, yellow 40%,blue 60%,orange 80%);}
.two{ width: 200px; height: 200px; border-radius: 0 0 200px 0; margin-top: 200px; background: linear-gradient( 45deg,red 0%,green 20%, yellow 40%,blue 60%,orange 80%); 
transform: translate(200px,-400px)}
 .three{ width: 200px; height: 200px; border-radius: 200px 0 0 0; background: linear-gradient( 45deg,red 0%,green 20%, yellow 40%,blue 60%,orange 80%); 
 transform: translate(0px,-800px)} 
 .four{ width: 200px; height: 200px; border-radius:0 200px 0 0;  background: linear-gradient( -45deg,red 0%,green 20%, yellow 40%,blue 60%,orange 80%); transform: translate(200px,-1000px)}

希望对你有帮助，祝学习愉快，欢迎采纳。

收起回答

提问者 weibo_纷纷的想念_0 #1

非常有帮助小小的一个指点将使我在学习的前进道路上促进了一大步，灰常感谢！

2017-02-16 18:28:07
提问者 weibo_纷纷的想念_0 #2

刚好我也学到了transform这里来了是说这里面的translare的作用怎么怪怪的原来可以这样立马应用

2017-02-16 18:29:44
提问者 weibo_纷纷的想念_0 #3

是translate

2017-02-16 18:30:16