css3 盒子模型 渐变

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;
  width: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;
  width: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, 像素

  七彩同心圆：
  width:200px;
  height: 200px;
  border-radius: 100px;
  background:radial-gradient(red,orange,yellow,green,cyan,blue,purple);

  灰色球：
  width: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);