第七十四节，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>

 附加：

如果：一个元素点击后有意外的边框，可以用outline：none；

将边框的尺寸计算在元素内，也就是边框不会占元素的尺寸box-sizing: border-box;，一般写在通用css里，

如在头部css写上:

div{

    box-sizing: border-box;

}

 

 

设置背景

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

设置背景

               属性                  　　　　　　  值             　　  说明           　　　　　　　　　CSS版本

        background-color         　　　　 颜色       　　　   背景的颜色                   　　    1

        background-image      　　　　  none或url 　　    背景的图片                      　　 1/3

       background-repeat        　　      样式名称       　　背景图片的样式                　　  1/3

         background-size      　　   　　长度值或其他 　　  背景图像的尺寸                       3

      background-position       　　     位置坐标       　　 背景图像的位置                 　　1

     background-attachment      　　  滚动方式       　　  背景图片的滚动                      1/3

         background-clip        　　        裁剪方式       　　 背景图片的裁剪                 　　3

       background-origin        　　      位置坐标       　　  背景图片起始点                 　  3

           background            　　　　  复合值       　　　　背景图片简写方式                   1

 

background-color设置背景颜色

               值                            说明                  　　　　　　　　CSS版本

              颜色代码              　  设置背景颜色为指定色                   1

           transparent        　　  设置背景颜色为透明色                   1

div {
    width: 100px;
    height: 50px;
    background-color: #ff2e2a;
}

<div>我是1</div>

 

background-image设置背景图片

             值                           说明                  　　　　　　CSS版本

            none            　　　取消背景图片的设置                    1

            url            　　      通过URL设置背景图片                 1

div {
    width: 318px;
    height: 213px;
    background-image: url("401.png");
}

<div>我是1</div>

 

background-repeat设置背景图片展现方式

                 值                           说明                  　　　　　　　　　　CSS版本

            repeat-x          　　     水平方向平铺图像                             　1

            repeat-y          　　     垂直方向平铺图像                                1

             repeat           　　      水平和垂直方向同时平铺图像                 1

            no-repeat        　　     禁止平铺图像                               　　1

body{
    background-image: url("401.png");
    background-repeat:no-repeat;
}
div {
    width: 318px;
    height: 213px;
}

<body>
<div>我是1</div>
</body>
</html>

 

background-position背景图片定位

             值                           说明                     　　　　　　　　　　CSS版本

            top          　　　　　将背景图片定位到元素顶部                        1

            left         　　　　    将背景图片定位到元素左部                        1

           right         　　　　   将背景图片定位到元素右部                        1

           bottom        　　      将背景图片定位到元素底部                        1

           center        　　　　  将背景图片定位到元素中部                        1

           长度值           　　　  使用长度值偏移图片的位置                        1

           百分数           　　     使用百分数偏移图片的位置                        1

html{
    height: 100%;
}
body{
    background-image: url("401.png");
    background-repeat:no-repeat;
    background-position: center;
}
div {
    width: 318px;
    height: 213px;
}

<div>我是1</div>

注意：背景图片定位，如果使用背景的元素没有指定宽度或者高度，有可能无法定位

 

background-size背景图片缩放

            值                 　　说明                                                                　　　　　　CSS版本

           auto              　　默认值，图像以本尺寸显示                                         　　　　    3

           cover            　　等比例缩放图像，使图像至少覆盖容器，但有可能超出容器               3                                                        

           contain         　　等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合      3                        

           长度和高度值   　　CSS长度值，比如px、em                                                         3

           百分数            　　比如：100%                                                                          3

div {
    background-image: url("401.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 418px;
    height: 313px;
}

<div>我是1</div>

 

background-attachment设置背景图片是否更随滚动条拖动

             值                           说明                     　　　　　　　　　　　　　　　　　　CSS版本

           scroll           　　　　 默认值，背景固定在元素上，不会随着内容一起滚动   　　      1           

           fixed         　　　　   背景固定在视窗上，内容滚动时背景不动                               1

body{
    background-image: url("845.jpg");
    background-attachment: fixed;
}

 

background-origin绘制背景图片，设置背景图片起始位置

             值                            说明                    　　　　　　　　 CSS版本

         border-box      　　     在元素盒子内部绘制背景                    3

        padding-box      　　　 在内边距盒子内部绘制背景                 3

        content-box      　　    在内容盒子内部绘制背景                     3 

div {
    background-image: url("401.png");
    background-repeat: no-repeat;
    border: 10px dashed red;
    background-origin: padding-box;
    padding: 50px;
    width: 218px;
    height: 113px;
}

<div>我是1</div>

 

background-clip裁剪背景图片

          值                              说明                       　　　　　　CSS版本

     border-box        　　　在元素盒子内部裁剪背景                   3

     padding-box       　　  在内边距盒子内部裁剪背景                3

     content-box       　　　在内容黑子内部裁剪背景                   3

div {
    background-image: url("401.png");
    background-repeat: no-repeat;
    border: 10px dashed red;
    background-clip: content-box;
    padding: 50px;
    width: 218px;
    height: 113px;
}

<div>我是1</div>

 

如果多个背景图标在一张图片上，用 坐标方式定位背景图标

说明：background: url("2015.png")(图片路径) 10px(横向坐标) -45px(竖向坐标) no-repeat(背景图片显示一次);

 

 

div{
    width: 132px;
    height: 42px;
    background-color: #4af5ff;
    background: url("2015.png") 10px -45px no-repeat;
    line-height: 42px;
}
samp{
    margin-left: 40px;
}

<div>
    <samp>加入购物车</samp>
</div>

效果：

 

注意：背景完整的简写顺序如下：

[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]/ [background-size]
[background-origin]
[background-clip];

如：background: silver url(img.png) no-repeat scroll left top/100% border-box content-box;