CSS属性

圆角：border-radius

   语法：

        border-radius：值；

     center 居中        top 上        left 左        right 右        bottom 下

   取值：

        px 像素

        % 百分比

   单个角设置圆角：

        border-top-left-radius        左上角

        border-top-right-radius       右上角

        border-bottom-left-radius        左下角

        border-bottom-right-radius        右下角

   圆角复合写法：

        border-radius：20px；4个角都是20px

        border-radius：20px  30px；左上角和右下角，右上角和左下角

        border-radius：20px  30px  40px；左上角，右上角和左下角，右下角

        border-radius：20px  30px  40px  50px；左上角，右上角，右下角，左下角

外边距：margin

   是指盒子与盒子之间的边距

   语法：

        margin：值；

   取值：

        px 像素（允许负值）

   单方向设置：

        margin-top：20px；上外边距20像素

        margin-bottom：20px；下外边距20像素

        margin-left：20px；左外边距20像素

        margin-right：20px；右外边距20像素

   外边距复合写法：

        margin：10px；4个外边距各10像素

        margin：10px  20px；上下外边距，左右外边距

        margin：10px  20px  30px；上外边距，左右外边距，下外边距

        margin：10px  20px  30px  40px；上外边距，右外边距，下外边距，左外边距

   让盒子居中：

        margin：0  auto；

        margin：auto；

    注：需要配合宽度达到居中

内边距：padding

   元素边框和元素内容之间的距离

   语法：

        padding：值；

   取值：

        px 像素

        %百分比

        *不可负值

   单边设置：

        padding-top：20px；上内边距20像素

        padding-right：20px；右内边距20像素

        padding-bottom：20px；下内边距20像素

        padding-left：20px；左内边距20像素

   内边距复合写法：

        padding：10px；4个内边距各10像素

        padding：10px  20px；上下内边距，左右内边距

        padding：10px  20px  30px；上内边距，左右内边距，下内边距

        padding：10px  20px  30px  40px；上内边距，右内边距，下内边距，左内边距

   注：box-sizing：border-box；将 border 和 padding 数值包含在 width 和 height 之内

边框：border

   边框宽度：border-width

   边框颜色：border-color

   边框类型：border-style

   边框颜色：

        border-color：red；颜色单词

        border-color：#000；#fff000；十六进制

        border-color：rgb（255，255，170）；rgb 颜色通道

        border-color：rgba（255，255，0，0.4）；rgb 透明度颜色

                a：Alpha 透明。取值范围0-1，0表示全透明，1表示不透明

                transparent 透明

   边框类型：

        border-style：solid；直线，实线（常用）

        border-style：double；双实线

        border-style：dashed；条状虚线

        border-style：dotted；点状虚线

        border-style：none；没有边框

   边框复合写法一：

        border-color：red；四个边框都是红色

        border-color：red  green；上下边框红色、左右边框绿色

        border-color：red  green  blue；上边框红色，左右边框绿色，下边框蓝色

        border-color：red  green  blue  yellow；上红色，右绿色，下蓝色，左黄色

     border-width，border-style同上原理

   边框复合写法二：

        border：width  style  color；

  例：border：1px  solid  #000；

单边复合写法：

        border-top：1px  solid  #000；

        border-right：1px  solid  #000；

        border-bottom：1px  solid  #000；

        border-left：1px  solid  #000；