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 外轮廓距离边框的距离
- display: none|block|inline-block|table|table-row(同tr)|table-cell(同td)|...
CSS3 长度单位
绝对单位
- em
- mm
- pt(点)
- p
- pc
- q(1/4毫米)
相对单位
- px
- em 默认字体高度的一半
- ex 默认字体大小一半
- rem 相对于根元素字体大小 的倍数
- vw 相对于视口的宽度,视口均分
- vh 相对于视口的高度,视口均分
- vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
- vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin
CSS3 颜色
设置半透明
- opacity 0~1之间的小数,不透明度,值越大,越不透明
颜色值
- hex 16进制
- colorname
- rgb
- rgba
- hsl(h(色调),s(饱和度),l(亮度))
- hsla
- transparent
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, 像素