盒子模型 阴影与渐变属性 课件 课件.pptxVIP

任务13阴影与渐变属性第五单元盒子模型 学习目标径向渐变Web字体图标box-shadow属性box-sizing属性线性渐变掌握 了解:重复渐变学习目标 任务目标实战演练——制作网站广告栏 任务目标实战演练——制作旅游攻略网 知识准备1. box-shadow属性n box-shadow属性：为盒子模型添加阴影效果n 语法规则：box-shadow：像素值1 像素值2 像素值3 像素值4 颜色值 阴 影类型； 参数值说明像素值1必需。阴影的水平偏移量。正值阴影在右，负值阴影在左。像素值2必需。阴影的垂直偏移量。正值阴影在下，负值阴影在上。像素值3可选。阴影的模糊半径。只能为正值。值越大，阴影越模糊。像素值4可选。阴影的扩展半径。正值阴影扩大，负值阴影缩小。颜色值可选。阴影的颜色。阴影类型可选。外阴影 (outset) 或内阴影 (inset) 。 知识准备示例：box-shadow属性style type=text/css div {width: 200px; height: 200px; margin: 10px auto;border: 1px solid #000;}#box {bbooxx--sshhaaddooww::5p5xpx5p5xpx101p0xp2xp2xp#x99#99,99;5px/*5p水x平10阴px影2p位x #置99，9 垂ins直et;阴影位置，阴影模糊半径，阴影扩展半径，阴影的颜 色;*/}/stylebodydiv id=box/div/body 知识准备2. box-sizing属性n box-sizing属性：定义盒子的宽度值（width）或高度值（height）是 否包含元素的边框和内边距。content-box：定义盒子的宽度值（width）或高度值（height） 时，不包含元素的边框和内边距。border-box：定义盒子的宽度值（width）或高度值（height） 时，包含元素的边框和内边距。 知识准备示例：box-sizing属性style type=text/css div {width: 230px; height: 80px; margin: 10px auto;border: 4px solid #000; padding: 10px;}#box1 {box-sizing: content-box;}#box2 {box-sizing: border-box;}/stylebodydiv id=box1box1:content-box/divdiv id=box2box2:border-box/div/body 知识准备3. 线性渐变n 线性渐变：起始颜色会沿着一条直线按顺序过渡到结束颜色n 语法规则：background-image:linear-gradient(渐变角度,颜色值1 起始位 置,颜色值2 起始位置,……, 颜色值n 起始位置);ü 渐变角度：取值范围是0~360deg，to top（从下到上， 0deg），to left（从右到左，270deg）, to right（从左到右，90deg）, to bottom（从上到下，180deg）。ü 起始位置：用于设置颜色边界，起始位置的值为像素数值或百分 比数值。 知识准备示例：线性渐变style type=text/css div {width: 200px; height: 200px; margin: 10px auto;border: 1px solid #000;background-image:lliinear-gradiientt(9t0odeg, righ#t,F#0F0,#00, F#0F50)%; ,#00F 80%);}/stylebodydiv/div/body 知识准备4. 径向渐变n 径向渐变：起始颜色会从一个中心点开始，依据椭圆或圆形形状进行 扩张渐变。n 语法规则：background-image: radial-gradient (渐变形状 圆心位置,颜色 值1 起始位置,颜色值2 起始位置,……, 颜色值n 起始位置);ü 渐变形状：水平和垂直半径的像素值或百分比，circle或ellipse。圆心位置：定义元素渐变的中心位置，at center、at left/right、at top/bottom、at 像素值/百分比。ü 起始位置：用于设置颜色边界，起始位置的值为像素数值或百分 比数值。 知识准备示例：径向渐变style type=text/css div {width: 200px; height: 200px; margin: 10px auto;border: 1px solid #000;background-image:radial-gradie