前言
这篇文章我们将会介绍 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，蓝色为 240
saturate：百分比，100% 为实际色调，0% 为灰色
lightness：百分比，50% 为实际色调，0% 为黑色，100% 为白色
- rgba()：r 表示红色 (red)，g 表示绿色 (green)，b 表示蓝色 (blue)，a 表示不透明度 (alpha)
- 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 { width: 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 { width: 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 { width: 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 { width: 900px; height: 900px; min-width: 900px; min-height: 900px; display: flex; flex-direction: row; flex-wrap: wrap; } .photo { margin: 0; padding: 0; width: 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>
