第七十四节，css边框与背景

标签：

css边框与背景

学习要点：
1.声明边框
2.边框样式
3.圆角边框

 本章主要探讨HTML5中CSS边框和背景，通过边框和背景的样式设置，给元素增加更丰富的外观。

声明边框
边框的声明有三个属性设置，样式表如下

           属性                       值                           说明                                            CSS版本

      border-width            长度值                      设置边框的宽度，可选                      1

      border-style              样式名称                  设置边框的样式，必选                       1

      border-color             颜色值                      设置边框的颜色，可选                      1

这三个属性值，只有border-style是必须声明，才可以出现边框。而其他两个属性会出现默认值。

div {
    border-style: solid;
}

<div>我是1</div>
<div>我是2</div>
<div>我是3</div>

border-width边框宽度取值

              值                　　说明

            长度值           　　CSS长度值：比如px、em等

            百分数           　　直接设置百分数：3%等

             thin             　　预设宽度

            medium        　　预设宽度

            thick            　　 预设宽度

div {
    border-style: solid;
    border-width: thick;
}

<div>我是1</div>
<div>我是2</div>
<div>我是3</div>

border-style边框线条的样式

               值                                   说明

             none          　　　　   　　没有边框

            dashed        　　　　　　   破折线边框

            dotted         　　　　　　  圆点线边框

            double        　　　　　　   双线边框

            groove        　　　　　　   槽线边框

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

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

            ridge         　　　　　　　 脊线边框

            solid         　　　　　　     实线边框

div {
    border-style: dotted;
    border-width: 3px;
}

<div>我是1</div>

border-color边框的颜色

                  值                                   说明

　　　　     颜色代码　　　　　　　　给边框加颜色

div {
    border-style: dotted;
    border-width: 3px;
    border-color: #3aff1e;
}

<div>我是1</div>

边框四条边中某一条边单独进行设置

               属性                          　　说明                         　　CSS版本

        border-top-width             　　定义顶端宽度             　　　1

        border-top-style    　　　 　　定义顶端样式   　　　　　　 1

        border-top-color 　　　　　　 定义顶端颜色　　　　　　　 1

       border-bottom-width        　　定义底部宽度                     1

       border-bottom-style 　　　　  定义底部样式　　　　　　　 1

       border-bottom-color　　　　   定义底部颜色　　　　　　   1

        border-left-width             　　定义左侧宽度                    1

        border-left-style     　　　　　定义左侧样式 　　　　　　  1

        border-left-color　　　　　　  定义左侧颜色　　　　　　  1

       border-right-width            　  定义右边宽度                    1

       border-right-style    　　　　   定义右边样式  　　　　　　1

       border-right-color　　　　　　定义右边颜色　　　　　　  1

div {
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: #ff2e2a;
}

<div>我是1</div>

边框简写格式

有很多时候没必要分写成三句样式，直接通过简写即可：

           属性                  　　值                    　　　　　　　　说明           　　　　　　CSS版本

         border                   <宽度> <样式> <颜色>               设置四条边的边框　　　　1

       border-top    　　　 <宽度> <样式> <颜色>               只设置上边框　　　　　   1

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

       border-left    　　　 <宽度> <样式> <颜色>               只设置左边框　　            1

      border-right    　　   <宽度> <样式> <颜色>                只设置右边框　　           1

如果四条边框一样简写格式

div {
    border: 6px solid crimson;
}

<div>我是1</div>

如果单独设置其中一条简写

div {
    border: 6px solid crimson;
    border-left: 2px solid springgreen;
}

<div>我是1</div>

 其他同理

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

                 属性                       　　　　值             　　　　　　说明        　　　　　　CSS版本

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

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

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

  border-bottom-left-radius  　　　　长度值或百分数 　　　　 左下边角圆                    3

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

注意：设置圆边角首先要先设置好边框的，宽度样式颜色，在设置圆边角

四条边角圆简写方式

div {
    border: 6px solid crimson;
    border-radius: 6px;
}

<div>我是1</div>

设置指定的边角圆，可以按照上右下左的规律，简写

div {
    border: 6px solid crimson;
    border-radius: 6px 0px 6px 0px;
}

<div>我是1</div>

第七十四节，css边框与背景

标签：

原文地址：http://www.cnblogs.com/adc8868/p/5975820.html