CSS效果小结
效果属性
1.box-shadow（盒子阴影）
示例
加上 box-shadow
内阴影
复杂例子
阴影的形状跟原来的形状是一样的
结果：
box-shadow 作用：1.营造层次感（立体感）2.充当没有宽度的边框（没有大小，不会占据位置）3.特殊效果
2.text-shadow（文本阴影）
作用：1.立体感 2.印刷品质感（边缘有模糊效果）
比较：
3.border-radius
圆角矩形
圆形
半圆/扇形
只有左上角，其余均为 0，若删掉 border 属性，则为扇形
椭圆
10px 和 20px 分别为 x轴 和 Y轴 的半径，设置椭圆
4.background
多背景叠加、渐变制作图案和纹理
雪碧图动画
鼠标放到上面会上下进行切换
背景图尺寸适应
背景覆盖整个容器（cover），同时整个长宽比不会变，超出部分会隐藏
5.clip-path(按路径进行裁剪）
对容器进行裁剪
圆形裁剪
常见的几何图形进行裁剪
支持动画
自定义路径裁剪
6.3D 变换
变换 transform
位移/缩放/斜切/旋转
3D 变换
效果：
效果属性
1.box-shadow（盒子阴影）
示例
加上 box-shadow
内阴影
复杂例子
阴影的形状跟原来的形状是一样的
结果：
box-shadow 作用：1.营造层次感（立体感）2.充当没有宽度的边框（没有大小，不会占据位置）3.特殊效果
2.text-shadow（文本阴影）
作用：1.立体感 2.印刷品质感（边缘有模糊效果）
比较：
3.border-radius
圆角矩形
圆形
半圆/扇形
只有左上角，其余均为 0，若删掉 border 属性，则为扇形
椭圆
10px 和 20px 分别为 x轴 和 Y轴 的半径，设置椭圆
4.background
多背景叠加、渐变制作图案和纹理
雪碧图动画
鼠标放到上面会上下进行切换
背景图尺寸适应
背景覆盖整个容器（cover），同时整个长宽比不会变，超出部分会隐藏
5.clip-path(按路径进行裁剪）
对容器进行裁剪
圆形裁剪
常见的几何图形进行裁剪
支持动画
自定义路径裁剪
6.3D 变换
变换 transform
位移/缩放/斜切/旋转
3D 变换
效果：