css3

CSS3 边框

border-radius 圆角边框 ---------->5px 或 5%

box-shadow 阴影边框 ------>六个值(前两个值必写) 单位 : px

border-image 用图片创建边框

过渡

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒

运动曲线 默认是 ease

何时开始 默认是 0s 立马开始

transform: translate(180px,-40px)

动画

animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

定义一个动画语法：

@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

如下图：

伸缩布局

min-width 最小值 min-width: 280px 最小宽度 不能小于 280

max-width 最大值 max-width: 1280px 最大宽度 不能大于 1280

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

flex-direction调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

justify-content调整主轴对齐（水平对齐）

|flex-start 默认值。项目位于容器的开头。 让子元素从父容器的开头开始排序但是盒子顺序不变

flex-end 项目位于容器的结尾。 让子元素从父容器的后面开始排序但是盒子顺序不变

center 项目位于容器的中心。 让子元素在父容器中间显示

space-between 项目位于各行之间留有空白的容器内。 左右的盒子贴近父盒子，中间的平均分布空白间距

space-around 项目位于各行之前、之间、之后都留有空白的容器内。 相当于给每个盒子添加了左右margin外边距

align-items调整侧轴对齐（垂直对齐）
stretch 项目被拉伸以适应容器。 让子元素的高度拉伸适用父容器（子元素不给高度的前提下)

center 项目位于容器的中心。 垂直居中

flex-start 项目位于容器的开头。 垂直对齐开始位置 上对齐

flex-end 项目位于容器的结尾。 垂直对齐结束位置 底对齐

flex-wrap控制是否换行

flex-flow: flex-direction  flex-wrap;  

flex-flow: 排列方向 换不换行;

文字阴影

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;