CSS3之渐变和阴影

发表于 | 分类于 |

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。这也是从有道云笔记转移内容的一部分。

渐变

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。

线性渐变

1
2
3
4
5
6
7
8
9
// 不重复线性渐变
background: linear-gradient(direction, color1 stop1, color2 stop2, ...);
// 重复线性渐变
background: repeating-linear-gradient(
	direction,
	color1 stop1,
	color2 stop2,
	...
);

第一个参数省略时，默认为“180deg”，等同于“to bottom”。
第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。
常见角度如下：

角度 英文 方向
0deg to top 从上到下
90deg to right 从左到右
180deg to bottom 从下到上
270deg to left 从右到左
———— to top left 从右下角到左上角
———— to top right 从左下角到右上角

其它角度类似。

径向渐变

1
2
3
4
5
6
7
8
9
10
// 不重复径向渐变
background: radial-gradient(center, shape size, start-color, ..., last-color);
// 重复径向渐变
background: repeating-radial-gradient(
	center,
	shape size,
	start-color,
	...,
	last-color
);

第一个参数为渐变中心；
第二个参数为形状大小；
第三以后的参数为颜色及停止位置；

渐变一定要加浏览器前缀，否则有的没有效果。也存在一定的兼容性问题，要根据不同浏览器调试

阴影

box-shadow 是向盒子添加阴影。支持添加一个或者多个。

1
2
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色]
	[投影方式];
属性 值
X 轴偏移量 必须，水平阴影的位置，允许为负值
Y 轴偏移量 必须，垂直阴影的位置，允许为负值
阴影模糊半径 可选，模糊距离
阴影扩展半径 可选，阴影尺寸
阴影颜色 可以，阴影颜色，默认黑色
投影方式 可选，默认外阴影（inset）

如果添加多个阴影，只需用逗号隔开即可。

_注意_：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

[越努力，越幸运！]