渐变 | <gradient> (Image Values) - CSS 中文开发手册 - Break易站
CSS 中文开发手册
渐变 | <gradient> (Image Values) - CSS 中文开发手册
<gradient>css数据类型是css。<image>由两种或更多种颜色之间的渐进式转换而成。CSS梯度没有内在维度也就是说,它没有自然的或优先的大小,也没有优先的比率。它的具体大小将与它所应用的元素的大小相匹配。
与涉及颜色的任何插值一样,在alpha预乘颜色空间中计算渐变。这样可以防止在颜色和不透明度变化时(除了在较旧的浏览器中使用透明关键字时)出现意外的灰色阴影。
梯度类型
线性梯度
生成的linear-gradient()功能。颜色沿着一条假想的线平稳地过渡。
1 2 3 4 | body { background : linear-gradient(to right , red , orange, yellow, green , blue , indigo, violet); } |
径向梯度
radial-gradient()功能。离原点越远,与原点的颜色越不相同,越接近下一个颜色。
1 2 3 | body { background : radial-gradient( red , yellow, rgb ( 30 , 144 , 255 )); } |
重复梯度
生成的repeating-linear-gradient()和repeating-radial-gradient()职能。它会重复所需的内容,以填充整个元素。
1 2 3 4 | body { background : repeating-linear-gradient(to top left , lightpink, lightpink 5px , white 5px , white 10px ); } |
规格
Specification | Status | Comment |
---|---|---|
CSS Image Values and Replaced Content Module Level 3The definition of '<gradient>' in that specification. | Candidate Recommendation | Initial definition. |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 内存占用高分析
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
· 在线客服系统 QPS 突破 240/秒,连接数突破 4000,日请求数接近1000万次,.NET 多
· C# 开发工具Visual Studio 介绍
· 在 Windows 10 上实现免密码 SSH 登录
· C#中如何使用异步编程