css三角：
我们用css 边框可以模拟三角效果
宽度高度为0
我们4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了
为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;
伪元素选择器注意事项
before 和 after 必须有 content 属性
before 在内容前面，after 在内容后面
before 和 after 创建的是一个元素，但是属于行内元素
创建出来的元素在 Dom 中查找不到，所以称为伪元素
伪元素和标签选择器一样，权重为 1
2d转换注意:
2D的移动主要是指水平、垂直方向上的移动
translate最大的优点就是不影响其他元素的位置
translate中的100%单位，是相对于本身的宽度和高度来进行计算的
行内标签没有效果
2D旋转注意：
后面的参数 x 和 y 用空格隔开
x y 默认旋转的中心点是元素的中心(50% 50%),等价于center center
还可以给x y 设置像素或者方位名词(top、bottom、left、right、center)
2D缩放注意:
x与y之间用逗号进行分隔
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
transform: scale(2, 2): 宽和高都放大了二倍
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
transform:scale(0.5, 0.5): 缩小
scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子。
当同时使用多个转换，其格式为 transform: translate() rotate() scale()
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
当我们同时有位置或者其他属性的时候，要将位移放到最前面.
要注意代码的执行顺序，先是HTML后是css文件。
