5.4 CSS3背景和边框新特性-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元5 CSS3新特性 5.4 CSS3背景和边框新特性 PART 01 CSS3新增背景相关属性 主要内容 CONTENTS PART 03 CSS3新增边框相关属性 PART 02 CSS3设置渐变背景色 2 CSS3新增背景相关属性 background-origin属性：设置背景图片的定位（填充）区域。 border-box：设置背景图片从边框起开始填充。 padding-box（默认值）：设置背景图片从内边距区起开始填充。 content-box：设置背景图片从内容区开始填充。 background-origin: border-box | padding-box | content-box; CSS3新增背景相关属性 background-size属性：设置背景图片在定位区域内的大小。 length:设置背景图片的绝对宽高。第一个值设置宽度，第二个值设置的高度。若只给出一个值，则第二个值为auto(自动)。 percentage：设置背景图片所占背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。若只给出一个值，则第二个值为auto(自动)。 cover：保持图片纵横比的情况下，将图片缩放成能够完全覆盖住背景定位区域的最小大小。 contain：保持图片纵横比的情况下，将图片缩放成背景定位区域能够放得下的最大大小。 background-size:length|percentage|cover|contain; CSS3新增背景相关属性 background-clip属性：设置背景图片裁剪保留的区域。 background-clip: border-box|padding-box|content-box; border-box（默认值）：设置背景图片裁剪保留从边框开始的部分。 padding-box：设置背景图片裁剪保留从内边距开始的部分。 content-box：设置背景图片裁剪保留内容区域部分。 【案例5.4.1】CSS3新增背景属性示例 CSS3设置渐变背景色 线性渐变 径向渐变 渐变 CSS3中渐变的背景效果通过设置background-image属性来实现。 6 CSS3设置渐变背景色 线性渐变语法 .box1 { width: 200px; height: 200px; background-image: linear-gradient(to bottom right , red, yellow); } background-image: linear-gradient(direction,color1,color2…); direction：设置渐变的方向，可以是一个角度值或者表示方向的预定义值（to top、to left、to right、to left top、to right bottom…等）。缺省默认方向是从上到下。 color1,color2…：指定渐变经历的两个或多个颜色值。 CSS3设置渐变背景色 径向渐变语法 background-image: radial-gradient(shape size at position,color1,color2…); shape：渐变的形状，ellipse(默认)表示椭圆，circle表示圆形。若元素形状是正方形，则两者效果一样。 size：渐变的大小，即渐变到哪里停止；position：确定圆心的位置。 color1,color2…：指定渐变经历的两个或多个颜色值。 .box1 {width: 200px; height: 200px; background-image:radial-gradient(red,yellow,green);} 【案例5.4.2】CSS3设置渐变背景色 CSS3新增边框相关属性 border-radius属性：设置元素外边框的圆角，是一个复合属性。 length：以长度值定义圆角半径。 %：以百分比定义圆角半径。 /：X轴方向圆角半径/Y轴方向圆角半径。若省略Y轴方向设置，默认与X轴方向相同。 border-radius: 1-4 length|% / 1-4 length|%; .box1 {border-radius: 15px 50px 30px 5px;} .box2 {border-radius: 15px 50px 30px;} .box3 {border-radius: 15px 50px;} .box4 {border-radius: 15px;} 【案例5.4.3】CSS3设置边框圆角 CSS3新增边框相关属性 border-image属性：设置以图片填充的边框，是一个复合属性。 border-image: source slice wid