css3如何实现渐变色(原理分析)

2024年12月29日 建站教程

Css3引入渐变功能。css3有多少种渐变?有线性渐变和径向渐变两种。本文介绍线性梯度。需要注意的是,这里的渐变不是一种颜色,而是一种特殊的图像。所以它只适用于背景图像。

设置css3渐变色属性

语法介绍:

background-image:linear-gradient(angle, color-stop1, color-stop2, ...)

参数Angle渲染模式方向

从左往右

background: linear-gradient(to right,red, yellow);
//to+方向,表示最终的方向,to right表示往右依次渲染颜色。

从下到上

background: linear-gradient(to top,red, yellow);
//to+方向,表示最终的方向,to right表示往右依次渲染颜色。

对角线,左上角对右下角

background: linear-gradient(to bottom right,red, yellow);
//to+方向,表示最终的方向,to right表示往右依次渲染颜色。

参数Angle渲染模式角度

background: linear-gradient(0deg,red, yellow)等同于background: linear-gradient(to top,red, yellow);
//单位用deg,这个角度并不是顺时针方向,而是逆时针。

css3线性渐变属性案例

background:lineargradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/pic.jpg");

本文链接:http://so.lmcjl.com/news/20340/

展开阅读全文