这篇文章我们将会介绍 CSS3 中一些常用的新特性
包括 选择器、过渡、动画、弹性布局、颜色、阴影、反射、渐变、字体、转换 等等
1、颜色
在 CSS3 之前，表示颜色可以使用以下三种方法：
- 关键字表示法，例如黑色可以表示为
black，白色可以表示为white - 十六进制格式，例如黑色可以表示为
#000000，白色可以表示为#FFFFFF rgb()，例如黑色可以表示为rgb(0,0,0)，白色可以表示为rgb(255,255,255)
而在 CSS3 中，又新增三种方法，分别是：
hsl()：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)hue：数值，取值范围为 0 ~ 359，例如红色为0，绿色为120，蓝色为240saturate：百分比，100%为实际色调，0%为灰色lightness：百分比，50%为实际色调，0%为黑色，100%为白色
rgba()：r 表示红色 (red)，g 表示绿色 (green)，b 表示蓝色 (blue)，a 表示不透明度 (alpha)alpha：数值，取值范围为 0 ~ 1，0为完全透明，1为完全不透明
hsla()：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)，a 表示不透明度 (alpha)
2、阴影
我们既可以为块级元素添加阴影，也可以为文字添加阴影
（1）块级元素阴影
我们可以使用 box-shadow 为块级元素添加阴影
box-shadow: offset-x offset-y blur-radius spread-radius color inset;
offset-x：水平偏移位置，必需offset-y：垂直偏移位置，必需blur-radius：模糊距离，可选，指定阴影的模糊程度spread-radius：阴影半径，可选，指定阴影的区域大小color：阴影颜色，可选，默认值是黑色inset：默认情况下设置的阴影是外部阴影，使用 inset 可以将阴影设置为内部阴影
<!DOCTYPE html>
<html>
<head>
<style>
.moon {
100px;
height: 100px;
border-radius: 50px;
background-color: rgba(255, 244, 99, 0.8);
box-shadow: 5px 5px 5px 10px rgba(255, 244, 99, 0.2);
}
</style>
</head>
<body>
<div class="moon"></div>
</body>
</html>
（2）文字阴影
我们可以使用 text-shadow 属性为文字添加阴影
text-shadow: offset-x offset-y blur-radius color;
offset-x：水平偏移位置，必需offset-y：垂直偏移位置，必需blur-radius：模糊距离，可选color：阴影颜色，可选，默认值是黑色
<!DOCTYPE html>
<html>
<head>
<style>
.shadow {
font-size: xx-large;
font-weight: bolder;
color: black;
background-color: white;
text-shadow: 5px 5px 5px gray;
}
</style>
</head>
<body>
<div class="shadow">你好，世界</div>
</body>
</html>
3、渐变
渐变效果有两种类型，分别是线性渐变（Linear Gradient）和径向渐变（Radial Gradient）
- 线性渐变：渐变效果向下、向右或向对角方向展开
- 径向渐变：渐变效果从中心开始向四周展开
（1）线性渐变
可以将 background-image 属性的值设置为 linear-gradient 添加线性渐变效果
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：指定渐变方向，可选，下面列举几个常见的值：to bottom：渐变方向从上到下展开，默认值to right：渐变效果从左到右展开to bottom right：渐变方向从左上到右下展开<degree>：水平线和渐变线之间的角度，按逆时针方向计算
color-stop1, color-stop2, ...：指定渐变颜色，必需
<!DOCTYPE html>
<html>
<head>
<style>
.rainbow {
800px;
height: 100px;
background-color: white; /* linear-gradient 不生效时使用 */
background-image: linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #00FFFF, #0000FF, #8B00FF);
}
</style>
</head>
<body>
<div class="rainbow"></div>
</body>
</html>
（2）径向渐变
可以将 background-image 属性的值设置为 radial-gradient 添加线性渐变效果
background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
-
shape：指定形状，可选，取值如下：ellipse：椭圆，默认值circle：圆形
-
size：表示渐变到哪停止，可选，取值如下：farthest-corner：最远角，默认值closest-corner：最近角farthest-side：最远边closest-side：最近边
-
position：表示中心点所在的位置，可选它由两个百分数值决定，分别代表中心点在水平和垂直方向的位置，默认为
50% 50% -
color-stop1, color-stop2, ...：指定渐变颜色，必需
<!DOCTYPE html>
<html>
<head>
<style>
.rainbow {
500px;
height: 500px;
background-color: white; /* radial-gradient 不生效时使用 */
background-image: radial-gradient(circle farthest-corner at 0% 100%, #FF0000, #FF7F00, #FFFF00, #00FF00, #00FFFF, #0000FF, #8B00FF);
}
</style>
</head>
<body>
<div class="rainbow"></div>
</body>
</html>
4、反射
通过 -webkit-box-reflect 属性我们可以实现镜面效果
-webkit-box-reflect：direction offset mask-box-image
direction：反射方向，取值如下：above：倒影出现在原对象的上方below：倒影出现在原对象的下方left： 倒影出现在原对象的左方right：倒影出现在原对象的右方
offset：倒影与原对象之间的间距mask：遮罩效果，图片或者渐变
<!doctype html>
<html>
<head>
<style>
.reflect {
font-size: xx-large;
font-weight: bolder;
-webkit-box-reflect: below 5px linear-gradient(transparent, rgba(255, 255, 255, 0.2));
}
</style>
</head>
<body>
<div class="reflect">你好，世界</div>
</body>
</html>
5、字体
@font-face 规则用来加载字体，它甚至可以让我们使用服务端的字体文件，一个例子如下：
@font-face
{
/* font-family 属性指定字体名称 */
font-family: myFont;
/* src 属性指定资源位置 */
src: url('myFont.ttf'), url('myFont.eot')/* IE9 */;
}
然后就能在文件中直接使用，例子如下：
.use-my-font {
font-family: myFont; /* 自定义的字体名称 */
}
6、转换
使用 transform 属性，我们可以使得元素变形，包括平移、旋转、缩放和倾斜
-
平移，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的移动距离
translate(x,y)、translate3d(x,y,z)、translateX(x)、translateY(y)、translateZ(z) -
旋转，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的旋转矢量，angle 定义顺时针旋转角度
rotate(angle)、rotate3d(x,y,z,angle)、rotateX(angle)、rotateY(angle)、rotateZ(angle) -
缩放，参数 x、y、z 分别定义沿着 X 轴、Y 轴、Z 轴的缩放倍数
scale(x,y)、scale3d(x,y,z)、scaleX(x)、scaleY(y)、scaleZ(z) -
倾斜，参数 x-angle、y-angle 分别定义与 X 轴、Y 轴的倾斜夹角，该操作会导致形状发生变化
skew(x-angle,y-angle)、skewX(x-angle)、skewY(y-angle)
<!doctype html>
<html>
<head>
<style>
.frame {
900px;
height: 900px;
min- 900px;
min-height: 900px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.photo {
margin: 0;
padding: 0;
300px;
height: 300px;
float: left;
overflow: hidden;
}
.photo:hover {
cursor: pointer;
transition: transform 0.4s;
transform: scale(1.2, 1.2);
}
</style>
</head>
<body>
<div class="frame">
<div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
<div class="photo"><img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" /></div>
</div>
</body>
</html>
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】