边框

一、边框属性

      作用：给元素加上一个边框
            第一种：
		         border-top：粗细  线型  颜色;       (上边框）
		      border-bottom：粗细  线型  颜色;       (下边框）   
		        border-left：粗细  线型  颜色;       （左表框）
		        boder-right：粗细  线型  颜色;       （右边框）
		        第二种：
		                        border ：粗细  线型  颜色；
透明色：transparent
	 边框的三个属性:   粗细（单位：px）  线型（dotted点状   solid实线    double双线    dashed虚线）  颜色。
	     例：
	     1.边框线型：            
               上边框是点状
               右边框是实线
               下边框是双线
               左边框是虚线
               
               border-top-style：:dotted；
               border-right-style: solid；
               border-bottom-style:double；
               border-left-style： dashed;

               border-style:dotted solid double dashed;

      2.边框尺寸：
               
               border-top-width： 2px  ；
               border-right-width：  4px ；   
               border-bottom-width：  6px ； 
               border-left-width：   8px ；
               
                border-width：2 px 4px 6px 8px;
       3.边框颜色：
       
                border-top-color：red；
                border-right-color：yellow；
                border-bottom-color：blue;
                border-left-color：green;
                 border-color：red yellow blue green;

       4.边框弧度：
           （单位：像素px  百分比%）
                border-radius:
                文本框弧度（∠角的弧度 轻微变化 单位用px 不用百分比）

       例：
        三角形：
                  width: 宽度（0px）；
		         height: 高度（0px）； 
	   background-color: 颜色（透明色）；
	         border-top: 粗细  线型  颜色（透明色）；
		   border-right: 粗细  线型  颜色（透明色）； 
		  border-bottom: 粗细  线型  颜色（透明色）；
		    border-left: 粗细  线型  颜色（透明色）；

            
                    width: 0px;
		            height: 0px;
		            background-color: transparent;
		            border-top: 100px solid transparent;
		            border-right: 100px solid transparent;
		            border-bottom: 100px solid transparent;
		            border-left: 100px solid transparent;

            圆：  
                        width: 宽度；
       	               height: 高度；
             background-color: 背景颜色；
	            border-radius: 边框弧度；

                        width: 100px;
       	               height: 100px;
             background-color: aquamarine;
	            border-radius: 50%;  

二、轮廓

     作用：绘制于元素周围的一条线，位于边框外。
         语法:outline
             属性： 粗细 线型  颜色
			          outline-width: 20px;
			          outline-style: solid;
			          outline-color: red;
			          outline:20px solid  red;

三、元素的分类

        块级元素：独占一行，对宽高设置有效，如果我们不给宽度的话，撑满整行，如果不给高度，高度会随着内容的变化而变化。
        行内元素：设置宽高是无效的，不独占一行多个标签是可以同时存在一行的。完全是靠内容撑开的。
       行内块元素：不是独占一行，设置宽高有效，并且可以多个标签存在一行。
                    可以使用  display 来改变元素的分类
                                       block      块级元素
                                       inline     行内元素
                                 inline-block     行内块元素
                                 （三种元素之间可以实现相互转换）
                                        display: block;
		                                display: inline;
		                                display: inline-block;

四、盒子模型

       组成： 内容  内边距  边框  外边距
       
                 边框：border
                 
                内边距：padding   边框和内容之间的距离。
                
	                   padding    存在一个值     上下左右都是改值
			                      存在两个值     上下一个值 左右一个值
			                      存在三个值     上   左右   下
			                      存在四个值     上右下左
	                  可以单独的去设置   上 右 下 左  内边距
	                              例如  padding-top  
	                                    padding-right
	                                    padding-bottom
	                                    padding-left
	                 
                 外边距：margin  元素和元素之间的距离（边框与边框的距离）。
                        margin    存在一个值     上下左右都是改值
			                      存在两个值     上下一个值 左右一个值
			                      存在三个值      上   左右   下
			                      存在四个值     上右下左
	                  可以单独的去设置   上 右 下 左  外边距边距
	                               例如 margin-top
	                                    margin-right
	                                    margin-bottom
	                                    margin-left


                      margin: 0 auto;（自动水平居中）

五、背景属性

      分类  ：  纯色背景（背景颜色）   背景图像
                 1.背景颜色
	                    background-color  ：  任意合法的颜色  和  transparent
                 2.背景图像	
	                    background-image  ： url（链接图片）
                 3.背景图像平铺
	                    background-repeat：
		                      repeat         默认值水平垂直方向都平铺
		                      repeat-x       水平方向平铺
		                      repeat-y       垂直方向平铺
		                      no-repeat      不平铺
4.背景图片的尺寸
	          background-size：  宽度  高度  ； （单位 ：PX   、%。）
	                 cover：全覆盖   将背景图等比放大直到背景图完全覆盖到元素的所有区域。
					 contain：包含    将背景图等比放大，直到下边或者右边有一个边缘碰到元素为止。
					 
5.背景图片固定
	background-attachment: fixed;   
						scroll：滚动  fixed 固定
						
6.背景定位
	       作用：改变背景图像在元素中的默认位置
	       属性：background-position：4px 8px;
						  水平偏移距离 和垂直偏移距离
						单位  ：  px  %  top  left right bottom 
7.CSS中的 雪碧图、精灵图
	作用：将一些小的背景图，合并到大的背景中去，以便实现减少服务器的请求次数。
	步骤：
		1.我们根据图像的大小创建一个元素
		2.将雪碧图作为元素的背景，再通过背景图片定位，实现位置偏移将用户要看到的图像显示在元素中

六、渐变

1.什么是渐变？
	   两种或者多种颜色间平滑度过的效果
                      分类：
	                     1.线型渐变
	                     2.径向渐变
	                     3.重复渐变  加上  repeating
2.渐变的组成
	色标：决定了渐变的每种颜色及出现的位置
	每个渐变效果都是由多个色标组成（2个以上）
	
	线型渐变
	     语法：background-image：linear-gradient（方向或者角度，色标........）
	                  linear-gradient()  线型渐变
			 		        angle 方向或者角度
			 				        to top  从下往上填充  
			 				        to left  从右往左
			 				        to right  从左往右
			 				        to bottom  从上到下
			 				
			 				0   == 0deg（度）  ==to top
			 				     90deg  = toright
			 				   180deg  = to bottom
			 				    270deg = to left
			 色标	 color  颜色
        例:
	       background-image: linear-gradient(45deg ,red 20%,blue 40%,yellow 80%);


	径向渐变
	    语法：background-image: radial-gradient（圆的半径 at x，y 圆心的位置 色标......）
	            size at position  径向渐变的位置以及圆心的位置
                            size  圆的半径 单位为px
	                    position  x，y 圆心的位置
	                                  px   %    top/left/center/bottom
    色标   	 color  颜色
	    例:
	    background-image: radial-gradient(200px at 50% 50%,red 20%,blue 40%,yellow 80%);



重复渐变:在线型渐变前加上repeating或在径向渐变前加上repeating。
       语法:：background-image：repeating-linear-gradient（方向或者角度，色标........）；
                   background-image: repeating- radial-gradient（圆的半径 at x，y 圆心的位置 色标......）；