HTML——CSS3学习
CSS3边框
三个标签：border-radius,box-shadow,border-image;border-radius可以设置圆角，可分别为左上，右上，左下，右下单独设置圆角。box-shadow设置阴影，水平阴影，垂直，模糊度，颜色，使用特例：
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
设置卡片效果
。border-image设置图片边框，边框大小以及图片填充方式 repeat，round，stretch。
背景
background-image 设置背景图片，可以设置多张，第一张在最上层显示
background-size 背景图片大小
background-orgin content-box，padding-box，border-box，背景图片放置的位置
background-clip 背景的绘制区域
颜色渐变属性
linear-gradient 线性渐变，可指定方向，默认从上到下，需设置初始颜色与结束颜色，使用rgb可以设置透明度
radial-gradient 径向渐变，由圆心向外渐变，默认为椭圆ellipse
文本效果
text-shadow 文字阴影
text-overflow 文字超出部分处理 ，clip直接裁剪，ellipsis 超出部分加上省略号
换行： word-wrap：normal 等同于 word-break：keep-all，支持换行，但是不支持长单词拆分换行，word-wrap：break-word，保留noraml遇到断字点如标点，空格等情况下换行的规则，并会对超出长度的长单词或url等截断换行，而word-break：break-all 则不采用断字点换行规则，只根据长途，达到对应长度自动换行
字体：@font-face font-family：自定义名字 src：字体引用文件 font-weight：字体粗细
2D/3D转换
transform(2D)： 平移：translate（x，y） 从当前位置在x轴 y轴平移大小
旋转：rotate（deg）角度旋转
放缩：scale（宽倍数，高倍数）宽高放缩一定倍数
倾斜：skew（20deg，30deg）x倾斜20deg，y轴倾斜30deg
matrix（），六个参数，包括平移，旋转，放缩，倾斜四种效果
transform(3D): tranlate3d（x，y，z），rotate3d（x，y，z，angle） scale（x，y，z）3D转换，matrix（）内使用16个值，4x4矩阵
transform-orgin：可修改被转换的元素位置
动画：
transition：设置过度效果，属性名➕时间 + 时间曲线+开始时间（后两个默认ease，0，为可选）
transition-property duration timing-function delay
@keyframes 创建关键动画
需要设置初始 与 结束 的style from to 或者 0% 100%，使用百分可以设置多重效果
animation-name duration timing-function delay iteration-count 播放次数 direction 下一次是否逆向 play-state 是否运行或者暂停动画
column：
column-count 分割列数 colum-gap 列之间的间隙 column-rule-style：solid 列边框样式 colum-rule-width 列边框宽度 colum-rule-color 颜色 column-rule三项简写
box-sizing：border-box 设定后，设置的宽度或者高度，是包括pading 和border ，不仅仅指盒子content
resizing：both 用户可调整宽高 horizontal 可调整宽度 vertical 可调整高度
弹性盒子
display：flex/inline-flex
flex-direction 设置主轴方向 row 横向 row-reverse 横 反向 column 竖直方向 cloumn-reverse反向
justify-content（主轴）： flex-start flex-end center space-between两端对齐 space-around 分散对齐
align-items（次轴）： flex-start flex-end center baseline与基线对齐 stretch是否拉伸
flex-wrap：wrap 换行
align-content：定义行的对齐方式，与单个item无关 flex-start flex-end center space-between两端对齐 space-around 分散对齐
order：可设置负数，根据内容，对item进行排序，最小排最前面
auto：设置剩余空间位置 margin：auto 剩余空间放在item四周，item剧中，margin-right：auto 剩余空间放在item右边，item靠左显示
flex：自动计算item所占用空间
align-self：设置单个item的对齐方式
