CSS开战第二章

     在昨天我们学习了三种CSS的样式，了解了一点点边框的设置，今天学习了边框的使用，来写一下自己的理解：

一、边框背景颜色设置

  background（背景）我们直接可以设置颜色。

background:blue ;

二、加载背景图片

  background-image：url（地址路径）(./图片）去找我们要加载的图片

background-image:url(../作业用到的图片/v2.png);

 注意：图片小，默认平铺，充满每个容器

三、背景平铺

开头还是background加上-repeat，有三个平铺：no-repeat （不平铺，只有一个图片）、repeat-x（水平面平铺）、repeat-y(垂直方向平铺）

               background-repeat: no-repeat;
               background-repeat: repeat-x;
               background-repeat:repeat-y;

记住用分号（;)结尾

四、背景图片的位置调整

        background-positon（调整位置）-x（x轴）分为：right（右边）、center（中间）、left（左边）

        background-positon（调整位置）-y（y轴）分为：top（上边）、center（中间）、bottom（下边）

            /* x轴right右边  center中间 left左 */
            /* y轴top上边 center中间  bottom下 */
            background-position-x:center;
            background-position-y: center;

简写方法：background-positon：位置（左中右）空格位置（上中下）

五、图片的大小设置

backgroun-size(大小）：宽（width）空格 高（hegiht）

 background-size: 500px 500px;

注意：图片大小设置要放在上一个background的下面，改变图片大小不能放第一个颜色背景里面

六、透明度

第一种、透明度代码：写在背景颜色后面，在rgb（0，0，0，0）最后一个0数值表示为透明色，只有0-1里面的取值。

注：只能让颜色变透明，内容不会改变。

 background-size: 500px 500px;

第二种、opacity：0.3；（0-1里面取值）。

注：内容和颜色同时会变透明。

  opacity: 0.3;

七、如何设置弧度

border-radius（弧度）：数值px；（没有加那个方向时，会同时设置4个角）

             border-top-left-radius: ;(左上)
             border-top-right-radius: ;（右上）
             border-bottom-left-radius:;(左下) 
             border-bottom-right-radius:;(右下)

八、浮动

如何让子元素排列：left（左）、right（右）

float:left（从左到右排列）/right （从右到左排列）

设置浮动float会造成塌陷，我们要用到“ clear(清除）”

clear（清除）：both（两者都）/left（从左清除浮动）/right(从右清除浮动）

美好的一天是短暂的，学习了背景颜色的学习还有透明度、弧度、浮动的了解.。