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:水平位置 垂直位置 模糊距离 阴影颜色;