css边框背景阴影设计及动画渐变效果

阴影：

边框阴影：
box-shadow
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值； 代码演示：

文本阴影：
text-shadow：与上图一致

边框

边框圆角：
border-radius：上右下左；
边框图片：
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量，边框背景图的扩展
border-image-repeat 图像边框是否应平铺 重复性(repeat)、铺满(round)或拉伸(stretch)。

背景图

起始位置：background-origin；
边框为起点：border-box；
内容为起点：content-box；
内边框为起点：padding-box;
边框尺寸：background-size；
背景裁剪：background-clip;
边框裁剪：border-box；
内容裁剪：content-box；
内边裁剪：padding-box;
背景图片：background：url(路径) left top,url(路径) right top;

渐变

线性渐变：linear-gradient（角度 to 方向，颜色1，颜色2）
eg:传送带；

径向渐变：radial-gradient（向外扩散范围，at 扩散中心点，颜色1，颜色2）
eg:球体

动画：

过渡：

transition-property:方向;
transition-duration：时间；
缩写：transition:方向 时间;
transition-delay：延迟加载；
transition-timing-function:速度：{
linear ；匀速
ease；平滑过渡
ease-in：加速
ease-out：减速
ease-in-out：先快后慢}

变换

transform；
旋转：rotate; rotate(x轴旋转,y轴，z轴)；单位deg;
位移：translate; translate（水平，垂直）单位px;
缩放：scale; scale（水平缩放，垂直）无单位，几倍;
扭曲：skew;skew(水平扭曲，垂直)单位deg;
translate-origin:位置；旋转中心；
eg: