前段进阶笔记

目录

浏览器私有前缀

圆角边框

阴影

文字阴影

盒子阴影

css3渐变

线性渐变（Linear Gradients）

径向渐变（Radial Gradients）

Transform2D转换      

Transform 3D    perspective 透视（呈现出伪3D）属性可连贯使用

过渡属性Transform

Animation动画

---

浏览器私有前缀

-text-stroke-：文字描边

color：transparent 颜色镂空

在实际使用中，通常将所有前缀写一遍后，标准的最后

圆角边框

阴影

文字阴影

text-shadow：水平位置 垂直位置 模糊度 颜色

盒子阴影

box-shadow：水平位置 垂直位置 模糊度 颜色

外延阴影：0px 0px 水平位置 垂直位置 模糊度 颜色

insert内置阴影

css3渐变

线性渐变（Linear Gradients）

方位可用英文，可用角度

background-image：linear-gradient（方位 颜色）

background：linear-gradient（方位 颜色）

重复设置线性渐变

background：repeating-linear-gradient（方位 颜色）

径向渐变（Radial Gradients）

Transform2D转换      

transform：函数名（X轴，Y轴）

translate移动

rotate旋转

scale缩放      （transition：all 1s）平滑过渡

skew（水平 垂直）倾斜

Transform 3D    perspective 透视（呈现出伪3D）属性可连贯使用

 

缩放

过渡属性Transform

transition：all 过渡时间  延时时间 速度函数

Animation动画