【HTML 5 边框】

HTML 5 border 边框

名称	效果
none	默认，无边框
solid	单实线
dashed	虚线
dotted	点线
double	双实线

边框设圆角

语法：border-radius: ;

			/* border-radius: 10px 30px 50px; */
			/* border-radius: 50%; */
			/* 盒子阴影 */
			/* box-shadow: 水平 垂直 大小 颜色; */
			/* border-image: url(../../2.png) 0 36 repeat; */

边框阴影

box-shadow:1px（水平阴影面积） 2px（垂直阴影面积） 3px（阴影大小，模糊程度） color（最后设置颜色）;

边框位置区域

	background-origin:padding-box;

裁剪区域

	background-clip:padding-box;

文本换行方式

	word-wrap:break-word;

单词换行方式

	word-break: keep-all;

设置字体

	@font-face
		{
		    font-family: myFirstFont;
		    src: url(sansation_light.woff);
		}
		 
		h2
		{
		    font-family:myFirstFont;
		}

线性渐变 Linear Gradients

向下/向上/向左/向右/对角方向

		
		默认情况：从上到下
		background-image: linear-gradient(color, 颜色,...);
		
		从左到右
		---to right|left|top|bottom
		background-image: linear-gradient(to right,red,orange);
		
		对角方式
		---to bottom right
		设置角度90deg
		---deg（角度）
		background-image: linear-gradient(90deg,red,#000);
		
		使用透明度
		---rgba设置4个值
		background-image: 
		linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
		
		重复线性渐变
		background-image:
		repeating-linear-gradient(red,black 20%,green 10%);
		

径向渐变 Radial Gradients

由它们的中心定义

 
 	background-image: radial-gradient(形状 大小 at 位置, 颜色, ...,颜色);
	

形状它可以是值 circle 或 ellipse默认值

1. farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
2. closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
3. closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
4. farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边