radial-gradient是一个很酷的css属性。我们可以用它给元素绘制出很有感觉的渐变背景。如果你不经常用它，会发现它的语法不太容易记忆，相比较于linear-gradient() 要稍微复杂一些。本文通过2个例子，带你领略一下它的魅力。渐变背景色
.hire_wrapper {
background: radial-gradient(circle at 22% 5%, rgb(85, 55, 101), rgb(30, 38, 74) 76%);
height: 100vh;
}可以在浏览器渲染出，下面的背景渐变：
文章图片
在线演示地址
高光文字
Syncopate@import url(https://fonts.googleapis.com/css?family=Syncopate);
body {
height: 100vh;
background: radial-gradient(
circle closest-corner at center 125px,
#222,
black 40%
) no-repeat;
text-align: center;
}
h1 {
display: inline-block;
padding-top: 100px;
font-family: 'Syncopate', sans-serif;
text-transform: uppercase;
background: radial-gradient(
circle farthest-corner at center center,
#ccc,
#333
) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}渲染出下面的结果：
文章图片
在线演示地址
背景跟随鼠标渐变动画 【css radial-gradient绘制渐变背景】如果再加入一些鼠标移入事件，可以做出更加屌炸天的效果，比如这个：
文章图片
日出
参考链接
