随笔 - 54,  文章 - 0,  评论 - 0,  阅读 - 13105
CSS盒子模型

盒子模型概述

1.认识盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的“盒子”，也就是一个盛装内容的容器。每个矩形盒子都由元素的内容、内边距、边框和外边距组成。

下面通过一个案例来认识到底什么是盒子模型。新建HTML页面，并在页面中添加一个段落，然后通过盒子相关属性对段落进行控制：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>认识盒子模型</title>
        <style type="text/css">
        .box{
            width: 200px;             /*盒子模型的宽度*/
            height: 50px;             /*盒子模型的高度*/
            border: 15px solid red;   /*盒子模型的边框*/
            background: #ccc;         /*盒子模型的背景颜色*/
            padding: 30px;            /*盒子模型的内边距*/
            margin: 20px;             /*盒子模型的外边距*/
        }
        </style>
    </head>
    <body>
        <p class="box">盒子中包含的内容</p>
    </body>
</html>
复制代码

 运行效果如图所示：

 

盒子基本模型结构如下图所示：

 

 

 在网页浏览器看来，网页就是多个盒子嵌套、排列的结果。其中，内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中；外边距是该元素与相邻元素之间的距离；如果给元素定义边框属性，边框将出现在内边距和外边距之间。

不要求每个元素都必须定义这些属性。

2.<div>标记

<div>标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。<div>与</div>之间相当于一个“盒子”，可以设置外边距、内边距、宽和高，同时内部可以容纳段落、标题、表格、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在<div>标记中，<div>标记中还可以嵌套多层<div>。

<div>标记功能非常强大，通过与id、类（class）等属性配合设置CSS样式，可以代替大多数的块级文本标记。下面通过一个案例来进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>认识盒子模型</title>
        <style type="text/css">
        .one{
            width: 450px;        /*设置宽度*/
            height: 30px;        /*设置高度*/
            line-height: 30px;   /*设置行高*/
            background: #fcc;    /*设置背景颜色*/
            font-size: 18px;     /*设置字体大小*/
            font-weight: bold;   /*设置字体加粗*/
            text-align: center;  /*设置文本水平居中对齐*/
        }
        .two{
            width: 450px;        /*设置宽度*/
            height: 30px;        /*设置高度*/
            background: #0F0;    /*设置背景颜色*/
            font-size: 14px;     /*设置字体大小*/
            text-indent: 2em;    /*设置文本首行缩进*/
        }
        </style>
    </head>
    <body>
        <div class="one">
            用div标记设置的标题文本
        </div>
        <div class="two">
            <p>div标记中嵌套的p标记中的文本</p>
        </div>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 注意：<div>标记可以替代块级标记如<h>、<p>等，但是他们语义上有一定的区别。例如<div>和<h2>的不同在于<h2>具有特殊的含义，语义较重，代表着标题，而<div>是一个通用的块级标记，主要用于布局。

3.盒子模型的宽与高

网页是由多个盒子模型排列而成，每个盒子模型都有固定的大小，在CSS中是使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比，实际工作中最常用的是像素值。

下面通过一个width和height属性来控制网页中的段落文本：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>盒子模型的宽度与高度</title>
        <style type="text/css">
        .box{
            width: 200px;    /*设置段落的宽度*/
            height: 80px;    /*设置段落的高度*/
            background: #ccc;  /*设置段落的背景颜色*/
            border: 8px solid #00f;  /*设置段落的边框*/
        }
        </style>
    </head>
    <body>
        <p class="box">盒子模型的宽度与高度</p>   
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 

 在CSS规范中，元素的width和height属性仅指块级元素内容的宽度与高度，其周围的内边距、边框和外边距是另外计算的。大多数浏览器都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

  • 盒子模型的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
  • 盒子模型的总高度=height+上下内边距之和+上下边框高度之和+上下外边距之和

注意：宽度属性和高度属性仅适用于块级元素，对行内元素无效。

盒子模型相关属性

1.边框属性

在网页设计中，常常需要给元素设置边框效果。CSS边框属性包括边框样式属性、边框宽度属性、边框颜色属性及边框的综合属性。

设置内容 样式属性 常用属性值
边框样式 border-style：上边[右边 下边 左边]；

none无（默认）、solid单实线、dashed虚线、dotted

点线、double双实线
边框宽度 border-width：上边[右边 下边 左边]； 像素值
边框颜色 border-color：上边[右边 下边 左边]； 颜色值
综合设置边框 border：四边宽度 四边样式 四边颜色  
圆角边框 border-radius：水平半径参数/垂直半径参数； 像素值或百分比
图片边框

border-images：图片路径 裁切方式/边框宽度/

边框扩展距离 重复方式；

  

边框样式

在CSS属性中，border-style属性用于设置边框样式。其基本语法格式为：

border-style：上边 [右边 下边 左边]；

 

定义不同的显示样式的四种常用属性值：

  • solid：边框为单实线
  • dashed：边框为虚线
  • dotted：边框为点线
  • double：边框为双实线

使用border-style属性综合设置四边样式时，必须按照上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。

例如<p>只有上边为虚线，其他三边为单实线，可以使用综合属性分别设置各边样式：

p{border-style：dashed solid solidsolid；}

 

下面通过一个案例对边框样式进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置边框样式</title>
        <style type="text/css">
        h2{border: double;}                       /*四条边框相同——双实线*/
        .one{border-style: dotted solid;}         /*上下为点线左右为单实线*/
        .two{border-style: solid dotted dashed;}  /*上实线、左右点线、下虚线*/
        </style>
    </head>
    <body>
        <h2>边框样式——双实线</h2>
        <p class="one">边框样式——上下为点线左右为单实线</p>
        <p class="two">边框样式——上边框单实线、左右点线、下边框虚线</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 边框宽度

border-width属性用于设置边框的宽度，其基本语法格式为：

border-width：上边 [右边 下边 左边]；

 

border-width属性常用区直单位为px。

下面通过一个案例对边框宽度进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置边框宽度</title>
        <style type="text/css">
        .one{border-width: 3px;}
        .two{border-width: 3px 1px;}
        .three{border-width: 3px 1px 2px;}
        p{border-style: solid;} /*不设置边框样式，则没有效果*/
        </style>
    </head>
    <body>
        <p class="one">边框宽度——3px。边框样式——单实线</p>
        <p class="two">边框宽度——上下3px左右1px。边框样式——单实线</p>
        <p class="three">边框宽度——上3px左右1px下2px。边框样式——单实线</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

边框颜色

border-color属性用于设置边框的颜色，其基本语法格式为：

border-color：上边[右边 下边 左边]；

 

在上面的语法格式中，border-color的属性值可为预定义的颜色值、十六进制或RGB代码。border-color的属性值同样可以设置为1个、2个、3个、4个，遵循值复制的原则。

例如设置段落的边框样式为单实线，上下边灰色，左右边为红色，代码如下：

p{
       border-style：solid；  /*综合设置边框样式*/
       border-color：#ccc #ff0000;   /*设置边框颜色：上下灰色、左右红色*/
   }

 

CSS3在原边框属性的基础上派生了以下四个边框颜色属性：

  • border-top-colors
  • border-right-colors
  • border-bottom-colors
  • border-left-colors

每个属性最多可以设置的边框颜色数和其边框宽度相等，这时每种边框颜色占1px宽度，边框颜色从外向内渲染。例如，边框的宽度是10px，那它最多可以设置10种边框颜色。需要注意的是，如果边框的宽度为10px，却只设置了8种边框颜色，那么最后一个边框色将自动渲染剩余的宽度。

综合设置边框

其基本格式如下：

border：宽度 样式 颜色；

 

上面的设置方式中，宽度、样式、颜色的顺序不分先后；可以只指定需要设置的属性，省略的部分将取默认值（样式不能省略）。

当每一侧的边框样式都不相同，或者只需要单独定义某一侧的边框时，可以使用单侧边框的综合属性进行设置。例如单独定义段落的上边框，代码如下：

p{border-top：2px solid #ccc}  /*定义上边框，各个值顺序任意*/

 

当四条边框样式相同时，可以使用border属性进行综合设置。

例如将二级标题的边框设置为双实线、红色、3像素宽，代码如下：

h2{border：3px double red；}

 

能够一个属性定义元素的多种样式，这些属性在CSS中称之为复合属性。

下面对标题、段落和图像分别应用border复合属性设置边框：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>综合设置边框</title>
        <style type="text/css">
        h2{
            border-top: 3px dashed #f00;      /*单侧复合属性设置各边框*/
            border-right: 10px double #900;
            border-bottom: 5px double #f60;
            border-left:10px solid green;
        }
        .pingmian{border: 15px solid #FF6600;}  /*border复合属性统一设置各边框*/
        </style>
    </head>
    <body>
        <h2>综合设置边框</h2>
        <img class="pingmian" src="鸟巢.webp"  />
    </body>
</html>
复制代码

 

运行效果如图所示：

 圆角边框

在网页设计中，经常需要设置圆角边框，运用CSS3中的border属性可以将矩形边框圆角化，其基本语法格式为：

border=radius：参数1/参数2

 

在上面的语法格式中，border-radius的属性值包含两个参数，它们的取值可以为像素值或百分比。其中“参数1”表示圆角的水平半径，“参数2”表示圆角的垂直半径，两个参数之间用英文“/”隔开。

下面通过一个案例对border-radius属性进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>圆角边框</title>
        <style type="text/css">
        img{
            border: 8px solid #6c9024;
            border-radius: 100px/50px;   /*设置圆角边框水平半径为100像素，垂直半径为50像素*/
        }
        </style>
    </head>
    <body>
        <img class="img" src="鸟巢.webp"  />
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 在使用border-radius属性时，如果参数2省略，则会默认其等于参数1。其效果如图所示：

 

 该属性同样遵循值复制的原则，其水平半径和垂直半径均可设置1~4个参数值，用来表示四角圆角半径的大小，具体解释如下。

  • 参数1和参数2设置1个参数值时，表示四角的圆角半径。
  • 参数1和参数2设置2个参数值时，第1个参数值代表左上圆角半径和右下圆角半径，第2个参数值代表右上和左下圆角半径，具体示例如代码所示： 
    img{border-radius：50px 20px/30px 60px；}

     设置图像左上和右下圆角水平半径为50px,垂直半径为30px；右上和左下圆角半径为20px，垂直半径为60px。

  • 参数1和参数2设置3个参数值时，第1个参数值代表左上圆角半径，第2个参数表值代表右上角和左下圆角半径，第3个参数值代表右下圆角半径，具体示例如代码所示： 
    img{border-radius: 50px 20px 10px/30px 40px 60px;}

     设置图像左上圆角的水平半径为50px，垂直半径为30px；右上和左下圆角水平半径为20px，垂直半径为40px；右下角的水平半径为10px，垂直半径为60px。

  • 参数1和参数2设置4个参数值时，第1个参数值代表左上圆角半径，第2个参数值代表右上圆角半径，第3个参数值代表右下圆角半径，第4个参数值代表左下圆角半径，具体示例如代码所示： 
    img{border-radius：50px 30px 20px 10px/50px 30px 20px 10px；}

     当应用值复制原则设置圆角边框时，如果“参数2”省略，则会默认其等于“参数1”的参数值。此时圆角的水平半径和垂直半径相等。

图片边框

其基本语法格式如下：

border-image：border-image-source border-image-slice/border-image-width/border-image-outset border-image-repeat;

 

属性 说明
border-image-source 指定图片的路径
border-image-slice 指定边框图像顶部、右侧、底部、左侧的内偏移量
border-image-width 指定边框宽度
border-image-outset 指定边框背景向盒子外部延伸的距离
border-image-repeat 指定图片的平铺方式

下面通过一个案例来演示图片边框的设置方法：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>图片边框</title>
        <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            border-style:solid;
            border-image-source: url(images/images.png); /*设置边框图片路径*/
            border-image-slice: 33%;  /*边框图像顶部、右侧、底部、左侧内偏移量*/
            border-width: 41px;  /*设置边框宽度*/
            border-image-outset: 0;  /*设置边框图像区域超出边框量*/
            border-image-repeat：repeat;  /*设置图片平铺方式*/
            border-style: solid; /*设置边框样式*/
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
复制代码

 

2.边距属性

内边距

所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充。在CSS中padding属性用于设置内边距，同边框属性border一样，padding也是复合属性，其相关设置属性如下：

  • padding-top：上内边距
  • padding-right：右内边距
  • padding-bottom：下内边距
  • padding-left：左内边距
  • padding：上内边距[右内边距 下内边距 左内边距]；

在上面的属性中，取值可为auto（自动默认值）、不同单位、相对于父元素宽度的百分比。实际工作中最常用的是像素值；不允许使用负值。

同边框相关属性一样，使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制，1个值为四边、2个值为上下/左右，3个值为上/左右/下。

下面通过一个案例对复合属性padding的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置内边距</title>
        <style type="text/css">
        .border{border:5px solid #f60;} /*为图像和段落设置边框*/
        img{
            padding: 80px; /*图像四个方向内边距相同*/
            padding-bottom: 0; /*单独设置下内边距*/
        }                 /*上面2行代码等价于padding：80px 80px 0*/
        p{padding: 5%;}   /*段落内边距为父元素宽度的5%*/
        </style>
    </head>
    <body>
        <img class="border" src="鸟巢.webp" />
        <p class="border">段落内边距为父元素宽度的5%</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

注意：如果设置内外边距为百分比，则不论上下或左右的内外边距，都是相对于父元素宽度的百分比，随父元素的变化而变化，和高度无关。

外边距

所谓外边距指的是元素边框与相邻元素边框之间的距离。其相关属性如下：

  • margin-top：上外边距
  • margin-right：右外边距
  • margin-bottom：下外边距
  • margin-left：左外边距
  • margin：上外边距[右外边距 下外边距 左外边距]；

margin相关属性的值，以及复合属性margin去1~4个值的情况与padding相同。但是外边距可以使用负值，使相邻元素重叠。

当对块级元素应用宽度属性，并将左右的外边距都设置为auto时，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。示例代码如下：

.header{width：960px; margin：0 auto；}

 下面通过一个案例来演示外边距的用法和效果：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置外边距</title>
        <style type="text/css">
        img{
            width: 300px;
            border: 5px solid red;
            float: left;  /*设置图像左浮动*/
            margin-right: 50px;  /*设置图像的右外边距*/
            margin-left: 30px;   /*设置图像的左外边距*/
            /*上面两行代码等价于margin：0 50px 0 30px*/
        }
        p{text-indent: 2em;}
        </style>
    </head>
    <body>
        <img src="鸟巢.webp" />
        <p>国家体育场（鸟巢），位于北京奥林匹克公园中心区南部，为2008年北京奥运会的主体育场，
        占地20.4万平米，建筑面积25.8万平方米，可容纳观众9.1万人。举行了奥运会、残奥会开闭幕式、
        田径比赛及足球比赛决赛。奥运会后成为北京市民参与体育活动及享受体育娱乐的大型专业场所，并
        成为地标性的体育建筑和奥运遗产。</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 网页中默认就存在内外边距的元素对应的标记有<body>、<h1>-<h6>、<p>等。

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距。

*{
      padding：0；  /*清楚内边距*/
      margin：0；   /*清楚内边距*/
  }

 

3.box-shadow属性

用于对盒子模型添加阴影效果，其基本语法格式如下：

box-shadow：像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型；

 

在上面的语法格式中，box-shadow属性共包含6个参数值，对它们的具体解释如表所示：

参数值 说明
像素值1 表示元素水平阴影位置（必选）
像素值2 表示元素垂直阴影位置（必选）
像素值3 阴影模糊半径（可选）
像素值4 阴影扩展半径，不能为负值（可选）
颜色值 阴影颜色（可选）
阴影类型 内阴影/外阴影（默认）（可选）

下面通过一个为图片添加阴影的案例来演示box-shadow属性的用法和效果：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>box-shadow属性</title>
        <style type="text/css">
        img{
            padding: 20px;
            border-radius: 50%;
            border: 1px solid #ccc;
            box-shadow: 5px 5px 10px 2px #999 inset;
        }
        </style>
    </head>
    <body>
        <img class="img" src="鸟巢.webp" />
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 4.box-sizing属性

box-sizing属性用于定义盒子模型的宽度值和高度值是否包含元素的内边距和边框，其基本语法格式如下：

box-sizing：content-box/border-box；

 

在上面的语法格式中，box-sizing属性的取值可以为content-box或border-box，对它们的解释如下：

  • content-box：当定义width和height时，它的参数值不包括border和padding。
  • border-box：当定义width和height时，border和padding包含在width和height之内。

下面通过一个案例对box-sizing属性进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>box-sizing属性</title>
        <style type="text/css">
        .box1{
            width: 300px;
            height: 100px;
            padding-right: 10px;
            background: #f90;
            border: 10px solid #ccc;
            box-sizing: content-box;
        }
        .box2{
            width: 300px;
            height: 100px;
            padding-right: 10px;
            background: #f90;
            border: 10px solid #ccc;
            box-sizing: border-box;
        }
        </style>
    </head>
    <body>
        <div class="box1">content_box属性</div><br />
        <div class="box2">border_box属性</div>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 背景属性

 1.设置背景颜色

background-color用于设置网页元素的背景颜色。默认值为transparent，即背景透明，此时子元素会显示其父元素的背景。

下面通过一个案例对background-color属性的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置背景颜色</title>
        <style type="text/css">
        body{background-color: #ccc;}  /*设置网页的背景颜色*/
        h2{
            font-family: "微软雅黑";
            color: #fff;
            background-color: #fc3; /*设置标题的背景颜色*/
        }
        </style>
    </head>
    <body>
        <h2>云课堂课程报名即可免费听</h2>
        <p>特大喜讯：云课堂课程全面开放，基础课程试听3天全免费，高级课程试听1天全免费，不需要缴纳
        任何费用，只要申请，你就可以听课了。</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 

 2.设置背景图像

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置背景颜色</title>
        <style type="text/css">
        body{
            background-color: #ccc;   /*设置网页的背景颜色*/
            background-image: url(鸟巢.webp);  /*设置网页的背景图像*/
        }  
        h2{
            font-family: "微软雅黑";
            color: #fff;
            background-color: #fc3; /*设置标题的背景颜色*/
        }
        </style>
    </head>
    <body>
        <h2>云课堂课程报名即可免费听</h2>
        <p>特大喜讯：云课堂课程全面开放，基础课程试听3天全免费，高级课程试听1天全免费，不需要缴纳
        任何费用，只要申请，你就可以听课了。</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 3.背景与图像不透明度的设置

RGBA属性

该模式是在红绿蓝三原色的基础上添加了不透明度参数。其语法格式为：

rgba{r,g,b,a,alpha}；

 

前三个参数与RGB中的参数含义相同，alpha参数是一个介于0（完全透明）和1（完全不透明）之间的数值。

例如，使用RGBA模式为p元素指定透明度为0.5，颜色为红色的背景，代码如下：

p{background-color：rgba（255,0,0,0.5）}

 

opacity属性

使用opacity属性能够使任何元素呈现出透明效果。其语法格式为：

opacity：opacityValue；

 

下面通过一个案例来演示如何使用opacity属性设置图像的不透明度：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>opacity属性设置图像的不透明度</title>
        <style type="text/css">
        #boxwrap{width: 330px; margin: 10px auto; border: solid 1px #ff6666;}
        img:first-child{opacity: 1;}
        img:nth-child(2){opacity: 0.8}
        img:nth-child(3){opacity: 0.5;}
        img:nth-child(4){opacity: 0.2;}
        </style>
    </head>
    <body>
        <div id="boxwrap">
            <img src="鸟巢.webp" width="160" height="109" >
            <img src="鸟巢.webp" width="160" height="109" >
            <img src="鸟巢.webp" width="160" height="109" >
            <img src="鸟巢.webp" width="160" height="109" >
        </div>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

4.设置背景图像平铺

默认情况下，背景图像会自动沿着水平和垂直2个方向平铺。如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性取值如下：

  • repeat：沿水平和垂直2个方向平铺（默认值）
  • no-repeat：不平铺
  • repeat-x：只沿水平方向平铺
  • repeat-y：只沿垂直方向平铺

5.设置背景图像的位置

如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将默认以元素左上角为基准点显示。如下所示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>opacity属性设置图像的不透明度</title>
        <style type="text/css">
        body{
            background-image: url(鸟巢.webp);  /*设置网页的背景图像*/
            background-repeat: no-repeat;  /*设置背景图像不平铺*/
        }
        </style>
    </head>
    <body>
        <h2>电商专题设计</h2>
        <p>不管你现在是否从事电商，现在和未来电商都将成为你生活的一部分，双11就要来了，是买还是卖我们
        都需要双11，如何完胜双11，来这里我们会告诉您更多关于双11的故事……</p>
        <p>不管你现在是否从事电商，现在和未来电商都将成为你生活的一部分，双11就要来了，是买还是卖我们
        都需要双11，如何完胜双11，来这里我们会告诉您更多关于双11的故事……</p>
        <p>不管你现在是否从事电商，现在和未来电商都将成为你生活的一部分，双11就要来了，是买还是卖我们
        都需要双11，如何完胜双11，来这里我们会告诉您更多关于双11的故事……</p>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 例如，将背景图像定义在页面的右上角，可以更改body元素的CSS样式代码：

body{
            background-image: url(鸟巢.webp);  /*设置网页的背景图像*/
            background-repeat: no-repeat;  /*设置背景图像不平铺*/
            background-position: right top; /*设置背景图像的位置*/
        }

 

运行效果如图所示：

 

在CSS3中，background-position属性的值通常设置为2个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标。

background-position属性的取值有多种，具体如下：

（1）使用不同单位的数值：直接设置图像左上角在元素中的坐标。 

（2）使用预定义的关键字：指定背景图像在元素中的对齐方式。其中2个关键字的顺序是任意的，如果只有一个值另一个默认为“center”。

（3）使用百分比：按背景图像和元素的指定点对齐。

  • 0%  0%：表示图像左上角与元素的左上角对齐。
  • 50%  50%：表示图像50%  50%中心点与元素50%  50%的中心点对齐。
  • 20%  30%：表示图像20%  30%中心点与元素20%  30%的中心点对齐。
  • 100%  100%：表示图像右下角与元素的右下角对齐，而不是图像充满元素。

      如果只有一个百分数，将作为水平值，垂直值，垂直值则默认为50%。

6.设置背景图像固定

如果希望背景图像固定在屏幕的某一位置，不随着滚动条移动，可以使用background—attachment属性来设置。

  • scroll：图像随页面元素一起滚动（默认）。
  • fixed：图像固定在屏幕上，不随页面元素滚动。

7.设置背景图像大小

background-size属性用于控制背景图像的大小，其基本语法格式如下：

background-size：属性值1 属性值2；

 

可以设置1个或2个值定义背景图像的宽高，其中属性值1为必选属性值，属性值2为可选属性值。属性值可以是像素值、百分比、cover或contain关键字。

属性值 说明
像素值 设置背景图像的高度和宽度。第1个值设置宽度，第2个值设置高度。如果只设置1个值，则第2个值默认为auto
百分比

以父元素的百分比来设置背景图像的宽度和高度。第1个值设置宽度，第2个值设置高度。如果只设置1个值，则第

2个值会默认为auto
cover 把背景图像扩展至足够大，使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景区域中
contain 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

下面通过一个案例对控制背景图像大小的方法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置背景图像的大小</title>
        <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            border: 3px solid #666;
            margin: 0 auto;
            background-color: #fcc;
            background-image: url(鸟巢.webp);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 200px 200px;
        }
        </style>
    </head>
    <body>
        <div>300px的盒子模型</div>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 8.设置背景的显示区域

background-origin属性可以改变这种定位方式，利用其我们可自行定义背景图像的相对位置。其基本语法格式如下：

background-origin：属性值；

 

在上面的语法格式中，background-origin属性有3种取值，分别表示不同的含义，具体解释如下。

  • padding-box：背景图像相对于内边距区域来定位。
  • border-box：背景图像相对于边框来定位。
  • content-box：背景图像相对于内容来定位。

下面通过一个案例对background-origin属性的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置背景图像的显示区域</title>
        <style type="text/css">
        p{
            width: 300px;
            height: 200px;
            border: 8px solid #bbb;
            padding: 40px;
            background-image: url(鸟巢.webp);
            background-repeat: no-repeat;
            /*background-origin: content-box;*/
        }
        </style>
    </head>
    <body>
        <p>深邃的夜，携带了众多的琐碎徘徊在临溪石径。若说，人生在世，纵然莫过于可悲了。
        苍天有泪，为何而悲，问星辰，却是那一缕心事，六分深埋，三分寄尘埃，一分薄酒难平
        心中惆怅！低叹人生长路漫漫，看世间百态，烟花易冷，只有刹那芳华。红尘过往，万载
        纠结，亦喜、亦悲。</p>
    </body>
</html>
复制代码

 

运行效果如图所示（注释内的代码为右图效果）：

 

 9.设置背景图像的裁剪区域

background-clip属性用于定义背景图像的裁剪区域。

在语法格式上，background-clip属性和background-origin属性的取值相似，但含义不同，具体解释如下：

  • border-box：默认值，从边框区域向外裁剪背景。
  • padding-box：从内边距区域向外裁剪背景。
  • content-box：从内容区域向外裁剪背景。

下面通过一个案例来演示background-clip属性的用法：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置背景图像的裁剪区域</title>
        <style type="text/css">
        p{
            width: 300px;
            height: 150px;
            border: 8px dotted #bbb;
            padding: 40px;
            background-color: #cf9;
            background-repeat: no-repeat;
            /*background-clip: content-box;*/
        }
        </style>
    </head>
    <body>
        <p>深邃的夜，携带了众多的琐碎徘徊在临溪石径。若说，人生在世，纵然莫过于可悲了。
        苍天有泪，为何而悲，问星辰，却是那一缕心事，六分深埋，三分寄尘埃，一分薄酒难平
        心中惆怅！低叹人生长路漫漫，看世间百态，烟花易冷，只有刹那芳华。红尘过往，万载
        纠结，亦喜、亦悲。</p>
    </body>
</html>
复制代码

 

 运行效果如图所示（注释内的代码为右图效果）：

 10.设置多重背景图像

CSS3并没有为实现多种背景图像提供对应的属性，而是通过background-image、background-repeat、background-position和background-size等属性提供多个属性值来实现多重背景图像效果，各属性值之间用英文逗号隔开。

下面通过一个案例对多重背景图像的设置方法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置多重背景图像</title>
        <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            border: 1px dotted #999;
            background-image: url(images/caodi.jpg),url(images/taiyang.jpg),url(images/tiankong.jpg);
            background-repeat: no-repeat;
            background-position: bottom,right top,center;
        }
        </style>
    </head>
    <body>
        <div>设置多重背景图像</div>
    </body>
</html>
复制代码

 

11.背景复合属性

使用background属性综合设置背景样式的语法格式：

background：[background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-size] [background-clip] [background-origin]；

 

在上面的语法中，各个样式顺序任意，对于不需要的样式可以省略。

下面通过一个案例对background背景复合属性的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景复合属性</title>
        <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            border: 5px dashed #b5ffff;
            padding: 25px;
            background: #B5FFFF url(鸟巢.webp) no-repeat left bottom padding-box;
        }
        </style>
    </head>
    <body>
        <div>走过红尘的纷扰，弹落灵魂沾染的尘埃，携一抹淡淡的情怀，迎着清新的微风，坐在岁月的源头，看
        时光婆娑的舞步，让自己安静在时间的沙漏里，感受淡如清风，静若兰的唯美。</div>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 12.list-style

list-style是一个复合属性，用于控制列表项目符号的样式

下面通过一个案例演示通过背景属性定义列表项目符号的方法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景属性定义列表项目符号</title>
        <style type="text/css">
        li{
            list-style: none;  /*清除列表的默认项*/
            height: 26px;
            line-height: 26px;
            background:url(鸟巢.webp) no-repeat left center;  /*为li设置背景图像*/
            padding-left: 25px;
        }
        </style>
    </head>
    <body>
        <h2>传智播客学科</h2>
        <ul>
            <li>网页平面</li>
            <li>Java</li>
            <li>PHP</li>
            <li>.NET</li>
        </ul>
    </body>
</html>
复制代码

 

渐变属性

1.线性渐变

在线性渐变过程中，起始颜色会沿着一条直线过渡到结束颜色。运用CSS3中的“background-image：liner-gradient（参数值）；”样式可以实现线性渐变效果，其基本语法格式如下：

background-image：liner-gradient（渐变角度，颜色值1，颜色值2……，颜色值n）；

 

在上面的语法格式中，linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变的角度和颜色值，具体解释如下：

（1）渐变角度

  渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或“to”加“left”“right”“top”和“bottom”等关键词。在使用角度设定渐变起点的时候，0deg对应“to top”，90deg对应“to right”，180deg对应“to bottom”，270deg对应“toleft”，整个过程就是以bottom为起点顺时针旋转。当未设置渐变角度时，会默认角度为“180deg”（等同于“to bottom”）。

（2）颜色值

  颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，个颜色值之间用英文“，”隔开。

下面通过一个案例对线性渐变的用法进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>线性渐变</title>
        <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-image: linear-gradient(30deg,#0f0,#00f);
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

 在每一个颜色值后面还可以书写一个百分比数值，用于标示颜色渐变的位置，具体示例代码如下：

background-image: linear-gradient(30deg,#0f0 50%,#00f 80%);

 

运行效果如图所示：

 

 2.径向渐变

在径向渐变过程中，起始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image：radial-gradient（参数值）；”样式可以实现径向渐变效果，其基本语法格式如下：

background-image：radial-gradient（渐变形状 圆心位置，颜色值1，颜色值2……，颜色值n）;

在上面的语法格式中，radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值，对各参数的具体介绍如下：

渐变形状

渐变形状用来定义径向渐变的行状，其取值既可以是定义水平和垂直半径的像素值或百分比，也可以是相应的关键词。其中关键词主要包括2个值——“circle”和“ellipse”。具体解释如下：

  • 像素值/百分比：用于定义形状的水平和垂直半径。
  • circle：指定圆形的径向渐变。
  • ellipse：指定椭圆形的径向渐变。

圆心位置

圆心位置用于确定元素的中心位置，使用“at”加上关键词或参数值来定义径向渐变的中心位置。该属性值类似于background-position属性值，如果省略则默认为“center”。该属性值主要有以下几种：

  • 像素值/百分比：用于定义圆心的水平和垂直半径，可以为负值。
  • left：设置左边为径向渐变圆心的横坐标值。
  • center：设置中间为径向渐变圆心的横坐标值和纵坐标值。
  • right：设置右边为径向渐变圆心的横坐标值。
  • top：设置顶边为径向渐变圆心的纵坐标值。
  • bottom：设置底边为径向渐变圆心的纵坐标值。

颜色值

“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用英文“，”隔开。

下面运用径向渐变来制作一个小球：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>线性渐变</title>
        <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            border-radius: 50%;  /*设置圆角边框*/
            background-image: radial-gradient(ellipse at center,#0f0,#030);
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

3.重复渐变

重复线性渐变

其基本语法格式如下： 

background-image：repeating-linear-gradient（渐变角度，颜色值1，颜色值2……，颜色值n）；

 

下面通过一个案例对重复线性渐变进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>重复线性渐变</title>
        <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-image:repeating-linear-gradient(90deg,#e50743,#e8ed30 10%,#3fa62e 15%);
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

重复径向渐变

其基本语法格式如下：

background-image：repeating-radial-gradient（渐变形状 圆心位置，颜色值1，颜色值2……，颜色值n）；

 

下面通过一个案例对重复径向渐变进行演示：

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>重复径向渐变</title>
        <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-image:repeating-radial-gradient(circle at 50% 50%,#e50743,#e8ed30 10%,#3fa62e 15%);
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
复制代码

 

运行效果如图所示：

 

posted on   心有所信方能行远  阅读(327)  评论(0)  编辑  收藏  举报
相关博文：
· 文本样式属性
· 浮动与定位
· CSS盒子模型(详解)
· CSS盒子模型
· CSS：盒子模型
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
Copyright © 2025 心有所信方能行远
Powered by .NET 9.0 on Kubernetes Powered By: 博客园
点击右上角即可分享
微信分享提示
AI IDE Trae