CSS3 radial-gradient

radial-gradient

该属于用于设置背景颜色径向渐变

<!-- linear-gradient 参数含义 -->
<!-- 参数1 | 渐变效果 circle、ellipse -->
<!-- 参数1.5 | 渐变位置 top、left、right、bottom、center -->
<!-- 参数2+ | 渐变颜色 -->

<!-- circle at right bottom 圆形从右下渐变 -->
<div style="width:100px; height:100px; background-image: radial-gradient(circle at right bottom, red, orange, yellow);"></div>

<!-- circle at center 圆形从正中间渐变 -->
<div style="width:100px; height:100px; background-image: radial-gradient(circle at center, red, orange, yellow);"></div>

at right bottom 效果


at center 效果

更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程