项目二任务二 制作“前沿科技”页面

科技在线制作“前沿科技”页面CONTENTS目录CSS3设置盒子背景属性第一部分CSS3设置盒子渐变属性第二部分CSS3设置盒子阴影属性第三部分CSS3设置盒子背景属性在网页设计中，背景设计是塑造视觉层次感和营造特定氛围的关键手段，而CSS背景属性为我们提供了强大的工具来细致控制网页元素的背景，包括颜色、图像、尺寸和定位。使用背景属性能够轻松地为网页元素设计出丰富而个性化的背景效果，进而显著增强网页的视觉冲击力和优化用户的互动体验。CSS3设置盒子背景属性1.背景颜色background-color属性是CSS中用于设置元素背景颜色的关键属性。通过它，我们可以为元素指定单一的纯色背景，这种颜色会覆盖元素的内容区域、内边距（padding）以及边框区域，并且会延伸到边框的外部边界。如果边框有透明部分，如虚线边框，背景颜色会透过这些透明区域显示出来。CSS3设置盒子背景属性1.背景颜色background-color属性支持多种颜色定义方式：①颜色名称关键词：使用预定义的颜色名称，如red、blue等。②十六进制值：使用十六进制颜色代码，如#fff（白色）、#000（黑色）、#6e6e6e（一种灰色）等。③RGB值：使用RGB函数定义颜色，如rgb(255,255,255)（白色）、rgb(0,0,0)（黑色）等。RGB值允许更精确的颜色定义。④RGBA值：使用RGBA函数定义颜色，允许设置透明度，如rgba(0,0,0,0.5)表示半透明的黑色。CSS3设置盒子背景属性1.背景颜色在案例中添加CSS样式代码来设置盒子的背景。div{

width:600px;}.color_one{

background-color:aqua;}.color_two{

background-color:#ff0000;}.color_three{

background-color:rgb(255,255,125);}CSS3设置盒子背景属性2.背景图像background-image属性在CSS中用于为网页元素添加背景图像，无论是整个页面还是单独的元素。这个属性允许你设置一个或多个背景图像，通过url()函数指定图像文件的路径。支持使用相对路径和绝对路径来定位图像文件。背景图像可以是任何图片格式，如JPEG、PNG、GIF或SVG。通过灵活使用background-image属性，我们可以为网页元素添加丰富的视觉效果，增强页面的吸引力和用户体验。CSS3设置盒子背景属性2.背景图像在上个案例中添加背景图像。.color_three{

background-image:url(img/2-1.jpg);

color:#fff;

}CSS3设置盒子背景属性2.背景图像——背景图像平铺在CSS中，background-repeat属性用于控制背景图像的平铺方式。该属性可以设置为以下几种值：repeatrepeat-xrepeat-yno-repeatCSS3设置盒子背景属性2.背景图像repeat背景图像在垂直和水平方向上平铺，直到填满整个元素的背景。背景图像只在水平方向上平铺。repeat-x背景图像只在垂直方向上平铺。repeat-y背景图像不进行平铺，只显示一次。no-repeatCSS3设置盒子背景属性2.背景图像——背景图像平铺背景图像平铺的应用有很多应用，比如：通过平铺小图像，可以创建复杂的图案效果；使用大图像的一小部分平铺，可以填充整个背景，而不需要加载整个大图像，有助于提高性能；在某些设计中，可能需要背景图像在特定方向上重复，以符合设计要求。通过合理设置background-repeat属性，你可以控制背景图像的显示方式，以满足不同的设计需求。CSS3设置盒子背景属性2.背景图像——背景图像大小在CSS中，background-size属性用于控制背景图像的尺寸。这个属性允许你指定背景图像的宽度和高度，或者使用特定的关键字来控制图像的显示方式。autocovercontainlengthpercentageCSS3设置盒子背景属性2.背景图像——背景图像大小背景图像大小主要是用于使用cover或contain可以创建响应式的背景图像，它们能够适应不同尺寸的屏幕；或者设置具体的尺寸或百分比，你可以控制背景图像的显示区域，实现图像的裁剪效果，确保背景图像在不同元素或不同页面上保持一致的显示效果。通过合理使用background-size属性，你可以控制背景图像的显示尺寸，以满足不同的设计需求和布局要求。CSS3设置盒子背景属性2.背景图像——背景图像大小在上个案例中设置背景图像大小。.img_size{

background-image:url(img/2-2.png);

/*设置背景平铺*/background-repeat:repeat;

/*设置背景大小*/

background-size:300px300px;

}CSS3设置盒子背景属性2.背景图像——背景图像大小在上个案例中设置背景图像平铺和大小。.img_size{

background-image:url(img/2-2.png);

/*设置背景不平铺*/background-repeat:no-repeat;

/*设置背景大小*/

background-size:300px300px;

}CSS3设置盒子背景属性2.背景图像——背景图像大小背景图像大小主要是用于使用cover或contain可以创建响应式的背景图像，它们能够适应不同尺寸的屏幕；或者设置具体的尺寸或百分比，你可以控制背景图像的显示区域，实现图像的裁剪效果，确保背景图像在不同元素或不同页面上保持一致的显示效果。通过合理使用background-size属性，你可以控制背景图像的显示尺寸，以满足不同的设计需求和布局要求。CSS3设置盒子背景属性2.背景图像——背景图像固定在CSS中，background-attachment属性用于控制背景图像是否固定或者随着页面滚动而移动。这个属性主要有以下几个值：scrollfixedlocalinheritCSS3设置盒子背景属性2.背景图像——背景图像固定scroll：这是默认值。背景图像会随着元素所在的页面滚动。fixed：背景图像固定在视口中，即使页面滚动，背景图像也不会移动。local：背景图像会随着元素内容的滚动而移动，如果内容没有溢出元素，那么背景图像的行为就像scroll。inherit：元素继承其父元素的background-attachment属性值。CSS3设置盒子背景属性2.背景图像——背景图像固定使用background-attachment属性时，需要注意它的效果可能在不同的浏览器和设备上有所差异，特别是在性能方面。在某些情况下，固定背景图像可能会导致页面滚动时的重绘问题，影响性能。因此，在使用fixed值时，需要确保它不会对用户体验产生负面影响。CSS3设置盒子背景属性2.背景图像——背景图像位置在CSS中，当我们给图片设置不平铺后，如果图像的大小小于盒子模型的大小，那么默认背景图片会显示在左上角。如果想要调整背景图片所在的位置，就要使用background-position属性，这个属性通常接收两个值，主要使用预定义好的位置关键字，常用的属性值如下。topleft：将背景图像的左上角放置在元素的左上角。topright：将背景图像的右上角放置在元素的右上角。topcenter：将背景图像的顶部中点放置在元素的顶部中心。bottomleft：将背景图像的左下角放置在元素的左下角。CSS3设置盒子背景属性2.背景图像——背景图像位置bottomright：将背景图像的右下角放置在元素的右下角。bottomcenter：将背景图像的底部中点放置在元素的底部中心。centercenter：将背景图像的中心点放置在元素的中心点。centerleft：将背景图像的左侧中点放置在元素的左侧中心。centerright：将背景图像的右侧中点放置在元素的右侧中心。centertop：将背景图像的顶部中点放置在元素的顶部中心。centerbottom：将背景图像的底部中点放置在元素的底部中心。CSS3设置盒子背景属性2.背景图像——背景图像位置在上个案例中设置背景图像平铺和大小。.img_position{

background-image:url(img/2-3.png);/*设置背景不平铺*/

background-repeat:no-repeat;

background-position:righttop;

}CSS3设置盒子背景属性2.背景图像——背景图像的裁剪区域在CSS中，background-clip属性决定了背景（包括背景颜色、背景图像和边框）的绘制区域。它指定了背景应该被裁剪到哪个盒子模型的区域。background-clip属性可以设置为以下值：border-box：这是默认值。背景延伸到边框（border）的边缘，覆盖整个边框区域。padding-box：背景延伸到内边距（padding）的边缘，但不包括边框。content-box：背景仅延伸到内容（content）区域，不包括内边距和边框。text：背景仅延伸到元素内的文本区域，不包括元素的其他部分。CSS3设置盒子背景属性2.背景图像——多重背景图像在CSS中，你可以为一个元素设置多个背景图像，这可以通过在background-image属性中用逗号分隔不同的图像来实现。每个背景图像可以有自己的重复方式、位置、尺寸和裁剪方式等，他们的属性同样也按照顺序使用逗号分隔。CSS会按照从上到下的顺序堆叠这些背景图像，即后面声明的图像会在前面声明的图像之下显示。CSS3设置盒子背景属性2.背景图像——多重背景图像在上个案例中设置背景图像平铺和大小。.double_img{

background-image:url(img/2- 5.png),url(img/2-6.png);

background-repeat:no-repeat;

background-size:200px,400px;

background-position:righttop,lefttop;

}CSS3设置盒子背景属性2.背景图像——多重背景图像使用多个背景图像可能会影响页面加载性能，尤其是在移动设备上。而且大多数现代浏览器都支持多重背景图像，但在一些旧的浏览器版本中可能存在兼容性问题，在这些环境中使用时需要进行测试，因此应当谨慎使用。CSS3设置盒子背景属性3.背景不透明度在CSS中，调整背景的不透明度可以通过几种不同的方法来实现。最直接的方法是使用RGBA颜色值或者使用CSS的opacity属性。不过，需要注意的是，opacity属性会影响元素及其所有子元素的不透明度，而不仅仅是背景。CSS3设置盒子背景属性3.背景不透明度——使用RGBA颜色值RGBA颜色值允许你指定颜色的红、绿、蓝值以及一个额外的alpha通道，用于设置颜色的不透明度。RGBA的取值范围是从0（完全透明）到1（完全不透明）。CSS3设置盒子背景属性3.背景不透明度——使用opacity属性opacity属性可以设置元素的不透明度。这个属性会影响元素及其所有子元素。如果你只想设置背景的不透明度，而不影响元素内的其他内容，你可能需要考虑使用其他方法，如在背景图像上叠加一个伪元素，并为该伪元素设置opacity。CSS3设置盒子背景属性3.背景不透明度CSS3设置盒子背景属性4.背景的显示区域background-origin属性在CSS中用于设置背景图片的定位区域。这个属性决定了background-position属性是相对于哪个区域来定位背景图像的。background-origin有三个不同的值：border-boxpadding-boxcontent-boxCSS3设置盒子背景属性4.背景的显示区域border-boxpadding-boxcontent-box背景图像相对于边框盒（borderbox）来定位。背景图像相对于内边距框（paddingbox）来定位。背景图像相对于内容框（contentbox）来定位。CSS3设置盒子背景属性4.背景的显示区域当设置多个背景图像时，可以为每个背景图像指定不同的background-origin属性值，用逗号分隔，每个图像都将与background-origin属性的相应值匹配。如果元素的background-attachment属性设置为fixed，则background-origin属性将不会产生影响，因为固定背景是相对于视口定位的。在实际应用中，background-origin可以与background-position、background-repeat等属性结合使用，以更精确地控制背景图像在元素中的位置和显示区域。CSS3设置盒子背景属性4.背景的显示区域CSS3设置盒子背景属性4.背景的显示区域添加代码background-origin:content-box;后显示效果CSS3设置盒子背景属性5.背景复合属性CSS提供了一个复合属性background，它允许你在单个声明中设置所有的背景属性。这包括背景颜色、背景图像、背景重复、背景位置、背景尺寸和背景附加等。使用这个复合属性可以使你的CSS更加简洁和易于维护。CSS3设置盒子背景属性5.背景复合属性background-color：设置元素的背景颜色。background-image：设置元素的背景图像，可以使用多个url()。background-repeat：设置背景图像的重复方式。background-attachment：设置背景图像是否固定或滚动。background-position：设置背景图像的位置。CSS3设置盒子背景属性5.背景复合属性CSS3设置盒子背景属性5.背景复合属性在使用背景复合属性的时候需注意：①顺序重要：在复合属性中，各个子属性的顺序与单独声明时相同。②简写属性：background是一个简写属性，如果省略某个子属性，CSS会使用该属性的默认值。③兼容性：大多数现代浏览器都支持background复合属性，但在一些旧的浏览器版本中可能存在兼容性问题。CSS3设置盒子渐变属性第二部分CSS3设置盒子渐变属性在CSS3中，可以使用linear-gradient或radial-gradient函数来创建渐变背景。这些函数允许你指定渐变的方向、颜色以及颜色停止点。CSS3设置盒子渐变属性1.线性渐变线性渐变（LinearGradient）是一种颜色渐变效果，它沿着一条直线从一个颜色过渡到另一个颜色。在CSS3中，可以使用linear-gradient函数来创建线性渐变背景。基本语法如下：background:linear-gradient(direction,color-stop1,color-stop2,...);CSS3设置盒子渐变属性1.线性渐变direction方向关键字的属性值：tobottom：从上到下。toright：从左到右。tobottomright：从左上到右下。totop：从下到上。

toleft：从右到左。totopleft：从右下到左上。totopright：从左下到右上。tobottomleft：从右上到左下。

CSS3设置盒子渐变属性1.线性渐变direction角度值也可以使用角度值来指定渐变的方向。角度值是从元素的正上方开始，顺时针测量的。CSS3设置盒子渐变属性1.线性渐变CSS3设置盒子渐变属性2.径向渐变径向渐变（RadialGradient）是一种颜色渐变效果，它从一个中心点向外辐射，形成一个圆形或椭圆形的渐变。在CSS3中，可以使用radial-gradient函数来创建径向渐变背景。这个函数是background-image属性的一个值。基本语法如下：background:radial-gradient(shapesizeatposition,start-color,...,last-color);CSS3设置盒子渐变属性2.径向渐变shape：可以是circle或ellipse。size：可以是closest-side、closest-corner、farthest-side、farthest-corner或具体的大小（如50px）。atposition：可以是center或具体的坐标（如topleft、20px30px）。start-color,...,last-color：定义颜色在渐变中的位置和颜色值。CSS3设置盒子渐变属性2.径向渐变shape形状关键字可以取的值有：circle：创建一个圆形渐变。ellipse：创建一个椭圆形渐变。closest-side：渐变的大小是到最接近边的距离。farthest-side：渐变的大小是到最远边的距离。closest-corner：渐变的大小是到最近角的距离。farthest-corner：渐变的大小是到最远角的距离。CSS3设置盒子渐变属性2.径向渐变渐变的中心位置可以是cent