CSS3 linear-gradient

linear-gradient

该属于用于设置背景颜色渐变效果

<!-- linear-gradient 参数含义 -->
<!-- 参数1 | 渐变方向 to top、to top right、to right、to bottom、to bottom left、to left、to top left  | 下例中 to right 代表从左到右 -->
<!-- 参数2+ | 渐变颜色、一般不小于2个 | 下例中 代表 从 red - orange - yellow 这个颜色顺序渐变 -->

<div style="background-image: linear-gradient(to right, red, orange, yellow);">渐变效果</div>

显示效果

.

参数补充

【参数一】除了使用固定的位置参数,也可以设置角度值,例如 linear-gradient(45deg)linear-gradient(-30deg),角度数从0 ~ 360

【参数二】可以通过%自定义颜色的渐变区域,例如 linear-gradient(45deg, red 20%, black 80 %) 代表从红到黑渐变,红色区域 20%,黑色区域 80%

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