HTML5+CSS3网站设计基础教程 第3版 第5章 盒子模型.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 5.8.10 设置多重背景图像 掌握设置多重背景图像的方法，能够显示多个背景图像。 学习目标 5.8 背景属性 5.8 背景属性 再CSS3中，通过background-image、background-repeat、background-position和background-size等属性的值来实现多重背景图像效果，各属性值之间用逗号隔开。 5.8.10 设置多重背景图像 案例演示 5.8.11 背景复合属性 掌握复合属性的使用方法，能够将背景相关的样式综合定义在一个复合属性中。 学习目标 5.8 背景属性 5.8 背景属性 在CSS中，背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。 使用background属性综合设置背景样式的语法格式 background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-size] [background-clip] [background-origin]; 5.8.11 背景复合属性 5.8 背景属性 5.8.11 背景复合属性 案例演示 CSS3渐变属性 5.9 在CSS3之前的版本中，如果需要添加渐变效果，需要使用背景图像来实现。而CSS3中增加了渐变属性，通过渐变属性可以轻松实现渐变效果。CSS3的渐变属性主要包括线性渐变、径向渐变和重复渐变，具体介绍如下。 5.9 CSS3渐变属性 5.9.1 线性渐变 掌握线性渐变的设置方法，能够设置线性渐变效果。 学习目标 5.9 CSS3渐变属性 运用CSS3中的“background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果。 设置线性渐变效果的的语法格式 background-image:linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n); 5.9.1 线性渐变 5.9 CSS3渐变属性 linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值。 5.9.1 线性渐变 5.9 CSS3渐变属性 1.渐变角度 渐变角度指水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或“to”加“left”“right”“top”和“bottom”等关键词。 5.9.1 线性渐变 5.9 CSS3渐变属性 2.颜色值 颜色值用于设置渐变颜色，其中“颜色值1”表示起始颜色，“颜色值n”表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色值，各颜色值之间用“,”隔开。 5.9.1 线性渐变 5.9 CSS3渐变属性 案例演示 5.9.2 径向渐变 掌握径向渐变的设置方法，能够设置径向渐变效果。 学习目标 5.9 CSS3渐变属性 运用CSS3中的“background-image:radial-gradient（参数值）;”样式可以实现径向渐变效果。 设置径向渐变效果的的语法格式 background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n); 5.9 CSS3渐变属性 radial-gradient用于定义渐变的方式为径向渐变，括号内的参数值用于设定渐变形状、圆心位置和颜色值。 5.9.2 径向渐变 5.9 CSS3渐变属性 5.9.2 径向渐变 1.渐变形状 渐变形状用来定义径向渐变的形状 渐变形状取值说明 像素值/百分比：用于定义形状的水平和垂直半径，例如“80px 50px”即表示一个水平半径为80px，垂直半径为50px的椭圆形。 circle：指定圆形的径向渐变。 ellipse：指定椭圆形的径向渐变。 5.9 CSS3渐变属性 5.9.2 径向渐变 2.圆心位置 圆心位置用于确定元素渐变的中心位置，使用“at”加上关键词或参数 值来定义径向渐变的中心位置。 圆心位置取值说明 像素值/百分比：用于定义圆心的水平和垂直坐标，可以为负值。 left：设置左边为径向渐变圆心的横坐标值。 center：设置