CSS3 私有前缀
- -webkit- chrome/safari等webkit内核浏览器
- -moz- firfox
- -o- opera
- -ms- IE
CSS3 盒子模型
-
box-sizing 值 content-box(默认) / border-box 盒子大小仅由宽高决定
-
resize 是否允许用户调节尺寸的大小
必须设置overflow:hidden; 才有效 box-sizing: border-box; 300px; height:200px; padding:20px; border:2px solid #ccc; overflow:hidden; resize:horizontal;
- 值 none / horizonta(改变宽度) / vertical(改变高度) / both(都改)
-
outline 给元素周围绘制一条轮廓线
outline:width style color
-
outline-width外廓线的宽度
- length 不允许负值
- medium 默认宽度
- thin 比默认宽度细的轮廓
- thick 比默认宽度粗的轮廓
-
outline-color
-
outline-style 值 同border-style solid / dotted / dashed ...
-
outline-offset 外廓线的偏移量
-
display: 值 新增了很多值
- list-item 指定对象为列表项目
- table 指定对下岗作为块元素级的表格,类似于html中的table标签
- table-row 指定对象作为表格行 类似tr
- table-cell 指定对象作为表格的单元格 类似td
- 详情见css3手册
CSS3 长度单位
绝对单位
- em
- mm
- pt
- p
- pc
- q
相对单位
- px
- em
- ex 默认字体大小一半
- rem 相对于根元素字体大小 的倍数
- vw 相对于视口的宽度
- vh 相对于视口的高度
- vmax
- vmin
CSS3 颜色
设置半透明
-
opacity 0~1之间的小数,不透明度,值越大,越不透明
滤镜: opacity:.5; filter:alpha(opacity=50); /*背景透明 字体不透明*/ .box02{ /*父元素相对定位*/ position:relative; filter:alpha(opacity=50); background-color: rgba(0,0,0,.5); } .box02 span{ position:absolute; 100%; left:0; top:0; }
颜色值
-
hex 16进制
-
colorname
-
rgb
-
rgba
-
hsl (色调、饱和度、亮度)
色调:0或360:红色、60:黄色、120:绿色、180:青色、240:蓝色 饱和度取值为 0%~100% 饱和度越高颜色越艳 亮度取值:0%~100%,100%最亮显示为白色
-
hsla 在hsl上增加了透明度(0-1) 0完全透明
透明也可以用opacity属性设 字和背景整体透明 而alpha通道可以单独针对元素的背景色和文字颜色等来指定透明度
-
transparent 透明
CSS3 渐变
线性渐变
-
linear-gradient(方向, 色标1 色标1位置, 色标2, 色标2位置)
也可以省略色标1和2的位置:颜色起始位置用百分比或长度单位 `linear-gradient(to right, red 10px, purple 100px)` linear-gradient(180deg,red,purple)
-
方向: 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, 像素
七彩同心圆: 200px; height: 200px; border-radius: 100px; background:radial-gradient(red,orange,yellow,green,cyan,blue,purple); 灰色球: 200px; height: 200px; border-radius: 100px; background:radial-gradient(at 30% 30%,#fff,#333); background:radial-gradient(at 30% 30%,#fff,#333); 笔记本(重复渐变): margin:0px; background:repeating-linear-gradient(180deg,#fff 0px,#fff 29px,#999 30px);