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);