css3基础

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