相关样式

边框样式

上下左右边框的设置

 .demo1{
                width:500px;
                height:300px;
                background:rgba(255,255,0,.5);
                /*设置上边框*/
                border-top:2px solid blue;
            }
            .demo2{
                width:500px;
                height:300px;
                background:rgba(255,0,255,.5);
                /*下边框*/
                border-bottom:2px solid blue;
            }
            .demo3{
                width:500px;
                height:300px;
                background:rgba(0,255,255,.5);
                /*左边框*/
                border-left:2px solid green;
                /*右边框*/
                border-right:2px solid pink;
            }

透明度

div{
                width:800px;
                height:400px;
                border:1px solid #f00;
                /* background:rgb(0,0,0); */
                background:rgba(0,0,0,.2);
            }

            /* 
               透明度：rgba(0,0,0,.2); 
               opacity：.5；
                 取值范围：0~1
            */

            p{
                width:800px;
                height:400px;
                background:red;
                opacity:.5; /*透明度**/
            }

4)边框与尺寸

        css单位：
             px  像素   屏幕上的一个点
             %   相对单位 根据父元素的大小来变化
             in  英寸    1 in=2.54cm
             cm  厘米     
             mm  毫米
             em/rem  
        
                  
       颜色单位：
            red blue     #F0F0F0
            红  （0-255）
            绿   （0-255）
            蓝  （0-255）

          rgb   
          r:red
          g:green
          b:blue

          rgb(0,0,0)  黑色
          rgb(255,255,255); 白色

          rgb(255,0,0);  红色
          rgb(0,255,0)  绿色
          rgb(0,0,255)  蓝色

          rgba()
             a:alpha 透明度
                范围：0-1
                 0:完全透明
                 1：完全不透明
    
         opacity:.5;透明度

         opacity与rgba()的区别：
            opacity:能把所包含的所有内容都变成透明
            rgba()只改变当前元素的透明度
   
    5)边框

        border:1px solid #000;
        border-top:上边框
        border-bottom: 下边框
        border-left:左边框
        border-right:右边框

        border-width:2px;  边框的宽度
        border-style:solid(实线)   dotted(虚线)
        border-color:red;  边框的颜色
        特殊：transparent（透明边框）