CSS学习笔记07

28、背景渐变

background-image:线性渐变

div{
	background-image:liner-gradient(to bottom right,red,green);默认从上到下
									(0-360)deg度
									(0-1)turn圈
	多个颜色默认平均分配，例如red 50px ,green,从50px才开始渐变
	background-image:repeating-linear-gradient(red 50px,yellow 100px)
}

（to left,red 50px,green,70px ,tan 100px）
方向至左 红色到50px开始渐变 绿色70px开始渐变 棕色100px开始渐变

#grad1 {
  height: 100px;
  background-image: linear-gradient(0deg, red, yellow); 
}

#grad2 {
  height: 100px;
  background-image: linear-gradient(90deg, red, yellow); 
}

#grad3 {
  height: 100px;
  background-image: linear-gradient(180deg, red, yellow); 
}

#grad4 {
  height: 100px;
  background-image: linear-gradient(-90deg, red, yellow); 
}
#grad5 {
    height: 200px;
	background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
#grad6{
  height: 200px;
  background-color: red; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%); 
}
}

background-image:镜像渐变

background-image:radial-gradient(red,green)
background-image:repeat-radial-gradient(red,green)重复渐变

注：正方形的渐变为圆形，长方形的渐变为椭圆形

radial-grandient(大小 at 位置，颜色位置， 颜色)

大小可选值
circle:圆形
ellipse椭圆
closet-side:近边
farthest-side:远边
closet-corner:近角
farthest-corner:远角

位置可选值
top:顶部
right:右侧
left:左侧
center:居中
bottom:底部

#grad1 {
    height: 150px;
    width: 200px;
    background-image: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
#grad2 {
    height: 150px;
    width: 200px;
    background-color: red; /* 浏览器不支持的时候显示 */
    background-image: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
}
#grad3 {
  height: 200px;
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

29、表格样式

border-spacing:0px此时边距为2px
border-collapse:collapse塌陷，边距1px
合并单元格
<td colspan="2"></td>行合并
<td rowspan="2"></td>列合并
text-aligin:centet
vertical-align:center
水平垂直居中

30、网址title的图标

引入图标

<link rel="icon" href="图标地址"> 

建议压缩文件