大家好，欢迎来到IT知识分享网。
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 0 auto;
/*
radial-gradient()
– 设置径向渐变
*/
background: radial-gradient(red, yellow, orange, yellowgreen);
background: radial-gradient(circle ,red, yellow, orange, yellowgreen);
background: radial-gradient(ellipse ,red, yellow, orange, yellowgreen);
/*
在开头可以指定渐变的形状：
circle 圆形
ellipse 椭圆形
– 也可以通过 半径来指定元素的大小
*/
background: radial-gradient(100px 200px ,red, yellow, orange, yellowgreen);
background: radial-gradient(200px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(at 0 0 ,red, yellow, orange, yellowgreen);
/*
通过at 来指定圆心的位置
*/
background: radial-gradient(at top center ,red, yellow, orange, yellowgreen);
/*
closest-side 表示渐变效果显示到离圆心最近边
farthest-side 表示渐变效果显示到离圆心最远的边
closest-corner 表示渐变效果显示到离圆心最近的角
farthest-corner 表示渐变效果显示到离圆心最远的角
*/
background: radial-gradient(closest-side at 100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(farthest-side at 100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(closest-corner at 100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(farthest-corner at 100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(farthest-corner ,red, yellow, orange, yellowgreen);
background: radial-gradient(red 10%, yellow 20%, orange 30%, yellowgreen 40%);
background: repeating-radial-gradient(red 10%, yellow 20%, orange 30%, yellowgreen 40%);
}
</style>
</head>
<body>
<div class=”box1″></div>
</body>
</html>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/32033.html
