css3 gradients渐变

最新推荐文章于 2024-06-15 06:46:09 发布

原创最新推荐文章于 2024-06-15 06:46:09 发布 · 166 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css3动画

当前文章被收录于：

css3动画

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文深入浅出地讲解CSS线性渐变（包括方向如从下到上、从左到右等）和径向渐变（中心、大小、形状定制）的用法，助您提升网页设计技巧。

css渐变（gradients）

线性渐变（linear gradients）-向下/向上/向左/向右/对角方向。

/*background: linear-gradient(direction, color stop1, color stop2, ...)*/
background: linear-gradient(to right, black 50%, white 50%);

径向渐变（radial gradient）-由它们中心定义

/*background: radial-gradient(center shape size, start color, ..., last color)
中心：默认（at center centen）
	语法（at x y）都是以左上角为参考点
	x y 可以是像素也可以是百分比 
大小：
	最近边 closest-side
	最远边 farthest-side
	最近角 closest-corner
	最远角 farthest-corner
形状： ellipse 椭圆  默认值
	   circle  圆
*/
background: radial-gradient(closest-side circle at 20% 20%, blue, yellow)