3.4 CSS背景和边框样式-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元3 CSS基础 3.4 CSS背景和边框样式 PART 01 设置背景颜色 主要内容 CONTENTS PART 03 设置边框样式 PART 02 设置背景图片 2 background-color属性：用来设置网页元素的背景颜色。 color：颜色值 background-color:color 属性值 说明 颜色名 直接指定颜色的英文名称，如表示红色color:red。 十六进制 在#后面指定3位或6位数值，如指定白色6位表示法为#ffffff，3位表表示法为#fff。 RGB  规则为rgb(red, green, blue)，指定red、green、blue颜色的强度，强度值介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%），如表示蓝色rgb(0,0,255) 或rgb(0%,0%,100%)。   RGBA 规则rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。 CSS设置背景颜色 background-image属性：用来设置网页元素的背景图片。 none（默认值）：无背景图片。 image：使用绝对/相对地址、渐变色切片图来确定图像，图像的格式可为扩展名为png、jpg等文件。 background-image:image | none CSS设置背景图片 background-repeat属性：用来设置元素的背景图像的填充方式，其中提供一个参数时，同时应用于水平方向和垂直方向；提供两个参数值时，第一个为横向，第二个为纵向。 repeat-x：背景图像在水平方向平铺。 repeat-y：背景图像在垂直方向平铺。 repeat：背景图像在水平方向和垂直方向平铺。 no-repeat：背景图像不平铺。 background-repeat:repeat-x | repeat-y | [repeat | no-repeat CSS设置背景图片 background-attachment属性：用来设置滚动时，背景图像相对于谁固定。 fixed:背景图像相对于视口（viewport）固定。 scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但随元素的祖先元素或窗体一起滚动。 background-attachment:fixed | scroll CSS设置背景图片 background-position属性：用来设置背景图像在元素中出现位置。可设置1~4个参数值。 percentage：用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。 length：用长度值指定背景图像在元素中出现的位置。可以为负值。 center：背景图像横向或纵向居中。 left：背景图像从元素左边开始出现。 right：背景图像从元素右边开始出现。 background-position:left | center | right | top | bottom | <percentage> | <length> CSS设置背景图片 background属性：用来设置元素的所有背景样式，为简写形式，属性间用逗号分隔，当样式重叠时，前面的背景图会被后面的覆盖。 bg-image：设置背景图片，即background-image属性。 position：设置背景图片在元素中的位置，即background-position属性。 repeat-style：设置背景图片是否重复，即background-repeat属性。 attachment：设置滚动时，背景图片对些谁固定，即background-attachment属性。 background:| position| repeat-style|attachment...... CSS设置背景图片 【案例3.3.4】设置元素样式 border-color属性：用来设置网页元素的边框线的颜色。 color：属性值可为1~4个参数。1个参数时颜色值填充于四个边框；2个参数时，第1个颜色值作用于上下边框，第2个颜色值作用于左右边框；3个参数时，第1个颜色值作用于上边框，第2个颜色值作用于左右边框，第3个颜色值作用于下边框；4个参数时，按上、右、下、左边框线顺序填色。 border-color:color; border-width属性：用来设置网页元素的边框线的尺寸。 length：用数值来设置边框线的尺寸，不能取负值。 medium：设置默认尺寸的边框线，值为3px。 thin：设置比默认尺寸细的边框线，值为1px。 thick：设置比默认尺寸粗的边框线，值为5px。 b