第4章 运用盒子模型划分网页模块（新）.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 4.4 【案例10】图标导航栏 3、元素类型的转换 display inline inline-block none 此元素将显示为行内元素（行内元素默认的display属性值）。 此元素将显示为块元素（块元素默认的display属性值）。 此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。 此元素将被隐藏，不显示，也不占用页面空间。 4.4 【案例10】图标导航栏 案例实现 效果图 4.5 【案例11】创意画框 在现实生活中，通过画框的装裱能够使书画作品更为美观，并且易于保存。在网页设计中，电子图片也可以通过画框的“装裱”，凸显艺术和美感。本节将结合素材运用CSS3新增的“颜色透明度”、“图片边框”、“渐变”、“阴影”来制作一款创意画框 4.5 【案例11】创意画框 创意画框效果图 案例效果图 4.5 【案例11】创意画框 知识引入 创意画框案例知识点 4.5 【案例11】创意画框 1、颜色透明度 通过引入RGBA模式和opacity属性，对背景与图片设置不透明度 rgba(r,g,b,alpha); 例如： p{background-color:rgba(255,0,0,0.5);} 4.5 【案例11】创意画框 1、颜色透明度 通过引入RGBA模式和opacity属性，对背景与图片设置不透明度 opacity：opacityValue; opacity属性用于定义标签的不透明度，参数opacityValue表示不透明度的值，它是一个介于0~1之间的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。 4.5 【案例11】创意画框 2、图片边框 在网页设计中，我们还可以使用图片作为元素的边框。运用CSS3中的border-image属性可以轻松实现这个效果。 概 念 border-image: border-image-source/ border-image-slice/ border-image-width/ border-image-outset/ border-image-repeat; 4.5 【案例11】创意画框 在网页设计中，我们还可以使用图片作为元素的边框。运用CSS3中的border-image属性可以轻松实现这个效果。 概 念 属性 说明 border-image-source 指定图片的路径 border-image-slice 指定边框图像顶部、右侧、底部、左侧内偏移量。 border-image-width 指定边框宽度 border-image-outset 指定边框背景向盒子外部延伸的距离。 border-image-repeat 指定背景图片的平铺方式 2、图片边框 4.5 【案例11】创意画框 3、阴影 在网页制作中，经常需要对盒子添加阴影效果。使用CSS3中的box-shadow属性可以轻松实现阴影的添加。 概 念 box-shadow属性也可以改变阴影的投射方向以及添加多重阴影效果。 例如： box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #333 inset; 4.5 【案例11】创意画框 4、渐变 在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的 “background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果。 1、线性渐变 background-image:linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n); linear-gradient用于定义渐变方式为线性渐变，括号内用于设定渐变角度和颜色值。 4.5 【案例11】创意画框 在线性渐变过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的 “background-image:linear-gradient（参数值）;”样式可以实现线性渐变效果。 1、线性渐变 4、渐变 4.5 【案例11】创意画框 径向渐变同样是网页中一种常用的渐变，在径向渐变过程中，起始颜色会从一个中心点开始，按照椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image:radial-gradient（参数值）;”样式可以实现径向渐变效果。 2、径向渐变 background-image:radial