标签：url 动画 highlight ota 头部 使用 max dev class
边框
border-radius:圆角 box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 盒阴影
tet-shadow:h-shadow v-shadow bur clor border-image:边界图片
背景
background-size:背景图片的尺寸
background-origin：content-box、padding-box 或 border-box 区域；
文本样式
text-shadow：文本阴影；
word-wrap:自动换行；
字体引用
@font-face{
font-fmily:"名字"
src: url(“字体位置”)
}
2D转换/3D转换
transform:
translate(top,left):从其当前位置移动;
rotate(30deg):顺时针旋转给定的角度；
scale(1.1):元素尺寸增加或减少;
skew(30deg,20deg):翻转给定的角度；
3D：
rotateX()：围绕X轴旋转；
rotateY():围绕Y轴旋转；
过渡
transition:width 2s;
动画
@keyframes创建动画
@keyframes myfirst
from{background:red;}
to{background:yellow;}
animation:动画名 2s
animate.css扩展文件
多列
column-count:规定元素应该被分隔的列数;
column-gap 属性规定列之间的间隔;
@media选择器
head头部添加：<meta name="viewport" content="width=device-width, initial-scale=1.0">
否则手机设备会以980px为宽度；
@media screen and (max-width:300px){}
手机端做页面：vw单位和rem单位的使用
html的字体大小100/750*100;此处乘100是因为PC浏览器最小字体12px;
设计图像素/100rem
标签：url 动画 highlight ota 头部 使用 max dev class
原文地址：https://www.cnblogs.com/wangzihao147/p/12001274.html
