CSS3 私有前缀
- -webkit- chrome/safari等webkit内核浏览器
- -moz- firfox
- -o- opera
- -ms- IE
CSS3 盒子模型
- box-sizing 值 content-box(默认) / border-box（把盒子的内边距，边框都算进去）
- resize 改变文本框的尺寸大小 值 none / horizontal / vertical / both
- outline
outline:width style color - outline-width 外轮廓宽度
- outline-color 外轮廓颜色
- outline-style 值 同border-style solid / dotted / dashed ...
- outline-offset 外轮廓距离border的距离
- outline:none,使文本框原有的颜色去除
- display
CSS3 长度单位
绝对单位
- mm
- pt
- p
- pc
- q
相对单位
- px 像素
- em 相对于当前对象内文本的字体尺寸，若当前字体尺寸未被人为设置，则相对于浏览器默认字体大小
- ex 默认字体大小一半 若当前字体尺寸未被人为设置，则相对于浏览器默认字体大小
- rem 相对于根元素（即html元素）字体大小 的倍数
- vw 相对于视口(窗口)的宽度。适用于响应式宽度
- vh 相对于视口(窗口)的高度。
- vmax 相对于视口的宽度或高度中较大的那个
- vmin 相对于视口的宽度或高度中较小的那个
重点rem vw
CSS3 颜色
设置半透明
- opacity 0~1之间的小数，不透明度，值越大，越不透明（IE不兼容）
- IE兼容的写法：filter:alpha(opacity=透明值)
颜色值
- hex 16进制
- colorname 用颜色关键字指定颜色
- rgb 正整数(0~255)/百分数（0~100%）
- rgba a代表透明度
- hsl h代表色调 s饱和度 l亮度
- hsla h代表色调 s饱和度 l亮度 a透明度
- transparent 透明
opacity和rgba的区别：
opacity:背景图片与文字均透明而rgba只会使背景透明，字不会透明 filter:alpha(opacity=50)也会使文字背景图片均透明
CSS3 渐变
线性渐变
- linear-gradient(方向, 色标1 色标1位置（渐变起始位置）, 色标2, 色标2位置（渐变终止位置）)
linear-gradient(to right, red 10px, purple 100px)- 方向： to left /to top /to right/to bottom / angle (0-360deg)
径向渐变
- radial-gradient(形状 半径 at 圆心, 色标 色标位置, 色标, 色标位置)
- 形状： ellipse / circle
- 半径： length， 百分比，closest-corner/closest-side/farthest-side/farthest-corner
- 位置 left/center/right top/center/bottom,
- 默认是椭圆（ellipse）
径向渐变的位置问题
- 位置决定了圆心的位置，如果提供了一个，另外一个默认为50%；若提供了两个，则一个是横坐标另一个是纵坐标。
- 可以用percentage length指定径向渐变圆心的坐标。可以为负值。
- 可用left center righ top center bottom设置圆心位置
重复渐变
- repeating-linear-gradient 重复线性渐变
- repeating-radial-gradient 重复径向渐变
- 属性类似linear-gradient,radial-gradient