径向渐变
1.基本语法
从中心向周围发散渐变,只有两种形状——椭圆(默认)和圆
<style>
#test{
width: 300px;
height: 350px;
margin: 150px auto;
//默认椭圆
background: radial-gradient(blue,yellow);
}
</style>
<div id="test"></div>
效果图:
2.调整发散位置(默认中心)
中心就是at center center
相当于at x y坐标,当然也可以是百分比(%)
x、y的参考坐标是左上角(0,0)
background: radial-gradient(at 20% 20%,blue,yellow);
效果图:
3.大小
最近边:closest-side
最远边:farthest-side
最近角:closest-corner
最远角:farthest-corner
background: radial-gradient(closest-side circle at 20% 20%,blue,yellow);
效果图: