cssradial-gradient绘制渐变背景
时间：2023-03-28 15:05:07
HTML
radial-gradient是一个很酷的css属性。我们可以用它来为元素绘制一个非常合理的渐变背景。如果你不经常使用它，你会发现它的语法不太好记，而且比linear-gradient()稍微复杂一些。本文用2个例子向你展示它的魅力。渐变背景色
.hire_wrapper{background:radial-gradient(circleat22%5%,rgb(85,55,101),rgb(30,38,74)76%);height:100vh;}可以在浏览器中渲染，背景渐变如下：在线演示地址高亮文字
Syncopate
@importurl(https://fonts.googleapis.com/css?family=Syncopate);身体{身高：100vh;背景：径向渐变（圆圈最近角在中心125px，#222，黑色40%）不重复；文本对齐：居中；}h1{显示：内联块；填充-顶部：100px；font-family:'Syncopate',sans-serif;文本转换：大写；背景：径向渐变（圆最远角在中心中心，#ccc，#333）不重复；背景剪辑：文本；-webkit-text-fill-color:transparent;}渲染结果如下：在线演示地址背景跟随鼠标渐变动画。如果你添加一些鼠标进入事件，你可以做出更棒的效果。比如这篇：日出参考链接文章首发于IICOOM-个人博客《css radial-gradient绘制渐变背景》
