22.CSS边框与背景【上】

                                          第十七章  CSS边框与背景【上】

一、声明边框

          属性               值              说明              CSS版本

    1、border-width        长度值      设置边框的宽度（可选）    1

    2、border-style        样式名称    设置边框的样式（必选）    1

    3、border-color        颜色值      设置边框的颜色（可选）    1

    //@charset "utf-8"

      div{

         width:200px;

         height:200px;

         border-style:solid;     //边框为黑实线。

         border-color:red;

         border-width:10px;

      }

二、边框样式

   1、边框宽度取值如下

           值               说明

         长度值        css长度，比如px,em等    

         百分数        直接设置百分数：1、2、3等

         thin       }  

         medium     }使用长度名称的预设宽度。这三个值的具体意义由浏览器来定义，从小到大依次增大。   

         thick      }

   2、边框的样式

           值               说明

       *  none            没有边框

       *  solid           实现边框

          dashed          破折线边框

          dotted          圆点线边框

          double          双线边框

          groove          槽线边框

          inset           使用元素内容具有内嵌效果的边框

          outset          使用元素内容具有外凸效果的边框

          ridge           脊线边框

   3、如果想对四条边中某一条边单独进行设置，可以使用如下设置；

              属性               说明               CSS版本

        border-top-width:   }

  （1） border-top-style:   }   定义顶端                1

        border-top-color:   }

 

        border-botton-width:   }

  （2） border-botton-style:   }   定义底部             1

        border-botton-color:   }

 

        border-right-width:   }

  （3） border-right-style:   }   定义右边              1

        border-right-color:   }

  

 * 4、如果四条边都一致，那么没必要写三句样式，可以直接简写：

          属性                      值                   说明            CSS版本

        border         }                             设置四条边的边框       1

        border-top     }                             只设置上边框           1

        border-botton  }     <宽度><样式><颜色>      只设置下边框           1

        border-left    }                             只设置左边框           1

        border-right   }                             只设置右边框           1

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~（推荐）                                ~

~     例、div{                           ~

~             border：10px solid red;    ~

~         }                              ~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

三、圆角边框

       CSS3提供了一个非常实用的圆角边框的设置，使用border-radius属性，就可以达到这种效果。

            属性                           值              说明             CSS版本

        border-radius                长度值或百分数      四条边角             3

        border-top-left-radius       长度值或百分数      左上边角             3

        border-top-right-radius      长度值或百分数      右上边角             3

        border-botton-right-radius   长度值或百分数      右下边角             3

        border-botton-right-radius   长度值或百分数      左下边角             3

    例、div{

           width:200px;

           height:200px;

           border:10px;                        //四个边角都为10px;

           /*borde:10px 20px 30px 40px;*/      //顺序为左上，右上，右下，左下，顺时针方向旋转。

        }