@charset "utf-8";
.ym {
	height: 800px;
	width: 100%;
	font-family: "黑体";
	/* 字体大小常用三种px,%,em
	     font-size: 16px;
       	 font-size: 3em;
	     font-size: 200%;
     */	
	/*filter: Alpha(Opacity=80);	
	Opacity:0.3;——表示透明*/
	/*Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)*/
	/*Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)*/
	/*Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)*/
}
.ym .p1{
	font-size: 36px;
	text-shadow: 3px 3px 5px blue,4px 4px 5px rgba(255,0,0,0.5);/*向文本添加阴影*/
	direction:ltr;  /*文字方向*/
	/*text-decoration: blink;不太支持了*/
	
		}
.ym .p2{
	font-size: 50px;
	text-stroke: 2px red;/*文本边框颜色*/
	text-stroke-width: 10px;/*文本描边宽度*/
	text-stroke-color: green;/*文本描边颜色*/
	text-fill-color: blue;/*文本的填充颜色 注意要加前缀*/
	-webkit-text-stroke: 2px red;
	-webkit-text-fill-color: blue;
	overflow: hidden;/*css3多两个*/
	overflow-x: hidden;
	overflow-y: hidden;
	text-overflow: ellipsis;/*text-overflow:是否表示溢出时显示省略标志"...",ellipsis表示当前是省略，clip是默认值不省略*/
	/*vertical-align: middle;  vertical-align:前面带有display:inline-block;样式连用，这样就会有向什么对齐*/	
	/*clip:rect(top right bottom left里面是数值);:表示裁切形状，但目前只有矩形可以使用,但同时要在position:absolute/fixed的情况下*/
		}
		
td{
	width:150px;
	height:60px;
	padding:10px;
	text-align:center;
  }
  table{
	 
	  border-collapse:separate; /*表示是否把表格边框合并为单一的边框.属性值：separate默认值/collapse边框合并*/
	  border-spacing:3px;  /*表示单元格之间边框的距离*/
	  caption-side:bottom; /*表示设置表格标题的位置.属性值：top默认值,在表格之上，则bottom在表格之下*/
	  table-layout:fixed;  /*表示设置显示宽度是否随内容拉伸.属性值：auto默认值/fixed列宽由表格宽度设定*/
	  empty-cells:hide;/*表示设置是否显示表格中的空单元格.属性:hide隐藏-/show显示 默认值*/
	  }
.div2 {
	width: 300px;
	height: 150px;
	background: rgba(122,60,30,0.5);
	border: 5px solid black;
	float: left;
	margin-top: 20px;
	margin-right: 20px;
	margin-left: 20px;
}
.div2.div2-1{
	border-radius:20px 80px;}/*表示设置4个圆角边*/
.div2.div2-2{
	border-top-left-radius:20px;/*表示在左上角设置1个圆角边*/
	border-bottom-left-radius:40px;/*表示在左下角设置1个圆角边*/
	border-top-right-radius:60px;/*表示在右上角设置1个圆角边*/
	border-bottom-right-radius:80px;/*表示在右下角设置1个圆角边*/
	}
	.div2.div2-3{
	border-image-source: url(../images/tu2.jpg);/*表示设置图像来源路径*/
	border-image-slice: 30;/*表示边框背景图的分割方式,如在30后面空格后加fill也会把中间显示*/
	border-image-width: 30px 50px;/*表示设置边框的厚度*/
	border-image-outset: 10px;/*表示设置边框背景图扩展*/
	border-image-repeat: repeat;/*表示设置边框图像的平铺方式，还有一个属性:round stretch/stretch round*/
	width: 260px;
	height: 130px;
	padding-top: 20px;
	padding-left: 30px;
}
.div2.div2-4{
	border-image-source: url(../images/tu2.jpg);/*表示设置图像来源路径*/
	border-image-slice: 30;/*表示边框背景图的分割方式,如在30后面空格后加fill也会把中间显示*/
	border-image-width: 30px 50px;/*表示设置边框的厚度*/
	border-image-outset: 10px;/*表示设置边框背景图扩展*/
	border-image-repeat: stretch round;/*表示设置边框图像的平铺方式，还有一个属性:round stretch/stretch round*/
	}
.div2.div2-5{
	border-image-source: url(../images/tu2.jpg);/*表示设置图像来源路径*/
	border-image-slice: 30 fill;/*表示边框背景图的分割方式,如在30后面空格后加fill也会把中间显示*/
	border-image-width: 30px 50px;/*表示设置边框的厚度*/
	border-image-outset: 10px;/*表示设置边框背景图扩展*/
	border-image-repeat:round;/*表示设置边框图像的平铺方式，还有一个属性:round stretch/stretch round*/
	}
.div2.div2-6{
	border-image-source: url(../images/tu2.jpg);/*表示设置图像来源路径*/
	border-image-slice: 90;/*表示边框背景图的分割方式,如在30后面空格后加fill也会把中间显示*/
	border-image-width: 30px ;/*表示设置边框的厚度*/
	border-image-outset: 10px;/*表示设置边框背景图扩展*/
	border-image-repeat:round stretch;/*表示设置边框图像的平铺方式，还有一个属性:round stretch/stretch round*/
	}
	
.div2.div2-7{
	border-image:url(../images/tu2.jpg) 30/30px 50px/10px stretch round;     /*表示设置图像来源路径*/
    width: 260px;
	height: 130px;
	padding-top: 20px;
	padding-left: 30px;
	}
	.div3 {
	width: 300px;
	height: 150px;
	background: rgba(122,60,30,0.5);
	border: 5px solid black;
	float: left;
	margin-right: 40px;
	margin-bottom: 20px;
	margin-left: 20px;
}
  /*
   box-shadow:向方框添加一个或多个阴影
   none：无阴影
   阴影顺序：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影外延值 阴影的颜色 inset内阴影（默认值为outset）
   */
   
.div3.div3-1{
	box-shadow:5px 5px 5px red;}
.div3.div3-1:hover{
	box-shadow:-5px -5px 5px red;}
	/*box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影的颜色  （1/2个图阴影效果） 加有 :hover动态  */
	
.div3.div3-2{
	box-shadow:5px -5px 5px red;}
.div3.div3-2:hover{
	box-shadow:-5px -5px 5px red;}
	/*box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值 阴影的颜色  （1/2个图阴影效果） 加有:hover动态*/
	
.div3.div3-3{
	box-shadow:5px 5px 5px red;}
.div3.div3-3:hover{
	box-shadow:5px 5px 5px 5px red;}
	/*box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值  阴影外延值 阴影的颜色（整个图阴影效果）加有 :hover动态*/
	
.div3.div3-4{
	box-shadow:5px 5px 5px 5px rgba(0,0,0,1);}
.div3.div3-4:hover{
	box-shadow:5px 5px 5px 5px rgba(0,0,0,0.5);}
	/*box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值  阴影外延值 阴影的颜色 透明度  （整个图阴影效果）加有 :hover动态*/
	
.div3.div3-5{
	box-shadow:5px 5px 5px 5px rgba(0,0,0,0.5);}
	/*box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值  阴影外延值 阴影的颜色 透明值 （整个图阴影效果 ）*/
	
.div3.div3-6{
	box-shadow:5px 5px 1px rgb(255,0,0)}
.div3.div3-6:hover{
	box-shadow:5px 5px 1px rgb(255,0,0),10px 10px 1px rgb(255,255,0),15px 15px 1px rgb(200,100,0);}
	/*box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值  阴影外延值 加多个阴影外延值 （1/2个图阴影效果）加有 :hover动态*/
	
.div3.div3-7{
		box-shadow:-5px -5px 1px rgb(255,0,0),-10px -10px 1px rgb(255,255,0),-15px -15px 1px rgb(200,100,0);}
	/*box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值  阴影外延值 加多个阴影外延值 （1/2个图阴影效果）*/
	
.div3.div3-8{
	box-shadow:
	          5px 5px 1px 5px rgb(255,0,0),
	          5px 5px 1px 5px rgb(255,255,0),
              5px 5px 1px 5px rgb(200,100,0);
	margin-top:20px;
	margin-left:20px;
}
.div3.div3-8:hover{
	box-shadow:
	          0px 0px 1px 5px rgb(255,0,0),
	          0px 0px 1px 10px rgb(255,255,0),
              0px 0px 1px 15px rgb(200,100,0);
	margin-top:20px;
	margin-left:20px;
}
   /*box-shadow ：水平偏移值 阴影垂直偏移值 阴影模糊值  阴影外延值 加多个阴影外延值（整个图阴影效果）加有 :hover动态*/
.div3.div3-9{
	box-shadow:
	          0px 0px 1px 5px rgb(255,0,0) inset;
	          
	    margin-top:20px;
	    margin-left:20px;
}
   /*box-shadow ：内切阴影：水平偏移值 阴影垂直偏移值 阴影模糊值  阴影外延值 加多个阴影外延值（整个图阴影效果）加有 :hover动态*/

.div4 {
	width: 300px;
	height: 150px;
	background: rgba(122,60,30,0.5);
	border: 5px solid black;
	float: left;
	margin-right: 40px;
	margin-bottom: 20px;
	margin-left: 20px;
}
.div4.div4-1{
	background:#36F url(../images/834-160FG22321.jpg) no-repeat;
	background-size:30%;}
.div4.div4-2{
	background:#36F url(../images/834-160FG22321.jpg) no-repeat;
	background-size:cover;}
.div4.div4-3{
	background:#36F url(../images/834-160FG22321.jpg) no-repeat;
	background-size:contain;}

.div4.div4-4{
	border:50px groove rgba(200,60,30,0.5);
	background:#09F url(../images/834-160FG22321.jpg) no-repeat;
	}


.div4.div4-5{
	border:50px groove rgba(200,60,30,0.5);
	background:#09F url(../images/834-160FG22321.jpg) no-repeat;
	background-origin:border-box;
	}
.div4.div4-6{
	border:50px groove rgba(200,60,30,0.5);
	background:#09F url(../images/834-160FG22321.jpg) no-repeat;
	background-origin:content-box;}
.div4.div4-7{
	border:50px groove rgba(200,60,30,0.5);
	background:#09F url(../images/834-160FG22321.jpg) no-repeat;
	background-origin:padding-box;
	}

.div4.div4-8{
	border:50px groove rgba(200,60,30,0.5);
	background:#09F url(../images/834-160FG22321.jpg) no-repeat;
	
	}
.div4.div4-9{
	border:50px groove rgba(200,60,30,0.5);
	background:#09F url(../images/834-160FG22321.jpg) no-repeat;
	background-clip:border-box;
	}
.div4.div4-10{
	border:50px groove rgba(200,60,30,0.5);
	background:#09F url(../images/834-160FG22321.jpg) no-repeat;
	background-size: cover;
	background-clip:padding-box;
	}
.div4.div4-11{
	border:50px groove rgba(200,60,30,0.5);
	background:#09F url(../images/834-160FG22321.jpg) no-repeat;
	background-size: cover;
	background-clip:content-box;
	}
.div4.div4-12{
	
	border:50px groove rgba(200,60,30,0.5);
	background: #36F url(../images/834-160FG22321.jpg) no-repeat;
	
	background-size: cover;
	background-clip:content-box;
	
}	


.div5 {
	width: 300px;
	height: 100px;
	float: left;
	margin: 50px;
	padding: 50px;
	border: 5px groove rgba(200,60,30,0.8);
	color: #FFF;
}

.div5.div5-1{
	background-image:linear-gradient(red,blue);}
	
.div5.div5-2{
	background-image:linear-gradient(to left,red,blue);
	/*background-image:linear-gradient(to right,red,blue);*/}
	
.div5.div5-3{
	background-image:linear-gradient(to right bottom,red,blue);
	/*background-image:linear-gradient(to left bottom,red,blue);*/}
	
.div5.div5-4{
	background-image:linear-gradient(60deg,red,blue);}
	
.div5.div5-5{
	background-image:linear-gradient(60deg,red,blue,green,orange);}
	
.div5.div5-6{
	background-image:linear-gradient(60deg,red 10%,blue 30%,green 80%,orange 100%);}
	
.div5.div5-7{
	background-image:linear-gradient(60deg,red 30px,blue 80px,green 120px,orange 300px);}
	
.div5.div5-8{
	background-image:repeating-linear-gradient(60deg,red 20px,blue 40px);}


.div6 {
	width: 300px;
	height: 100px;
	float: left;
	margin: 50px;
	padding: 50px;
	border: 5px groove rgba(200,60,30,0.8);

}
.div6.div6-1{
	background: radial-gradient(red,blue,orange);}
.div6.div6-2{
	background: radial-gradient(circle,red,blue,orange);}
.div6.div6-3{
	background: radial-gradient(circle at right,red,blue,orange);}
.div6.div6-4{
	background: radial-gradient(circle at right top,red,blue,orange);}
	
.div6.div6-5{
	background: radial-gradient(circle 50px,red,blue,orange);}
	
.div6.div6-6{
	background: radial-gradient(circle closest-side,red,blue,orange);}
	
.div6.div6-7{
	background: radial-gradient(circle farthest-side,red,blue,orange);}
	
.div6.div6-8{
	background: radial-gradient(circle closest-corner,red,blue,orange);}
	
.div6.div6-9{
	background: radial-gradient(circle farthest-corner,red,blue,orange);}
.div6.div6-10{
	background: repeating-radial-gradient(circle 50px,red,orange);}
	
.div7.bt1{
	font-size: 16px;

	text-shadow:2px 2px 3px rgba{0,0,0,0.8);
	clear: left;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;

	}
	
.div7.bt1.bt2{
	border-radius:10px;
}
 
.div7.bt1.bt2.bt3{
	 border-radius:30px;
}

.div7.bt1{
    background:orange;
	background:linear-gradient(to left,orange red);
	}
.div7.bt1:hover{
    background:red;
	background:linear-gradient(to right,orange red);
	}