（中职）Web前端设计基础 项目九-2电子课件

1、YCF正版可修改PPT（中职）Web前端设计基础 项目九-2电子课件CSS 3修饰表格表单项目九授课教师：姓名WEB前端设计基础Contents1.项目描述2.知识准备3.项目实施4.项目拓展5.项目小结6.技能训练二 知识准备使用CSS美化背景；使用CSS修饰表格。使用CSS美化边框；使用CSS设置圆角边框；使用CSS设置图片边框；使用CSS设置边框阴影；使用CSS设置圆角边框CSS 3的border-radius属性可用来定义边框的圆角效果，格式如下：border-radius:none | 1,4 / 1,4;其中，none是默认值，表示没有圆角；表示由浮点数和单位标识符组成的长度值。例

2、如设置圆角边框为10像素、圆角显示为1/4个圆的代码为：border-radius:10px;例如设置圆角的水平半径是5像素、垂直半径是50像素的代码为： border-radius:5px / 50px;例如设置没有圆角的代码为（只要参数中出现0，则为矩形，不显示圆角）：border-radius:0px;使用CSS设置圆角边框例如设置左上角圆角半径为10像素、右上角圆角半径为20像素、右下角圆角半径为30像素、左下角圆角半径为40像素的代码为：border-radius:10px 20px 30px 40px;如果最后一个值省略，左下角半径与右下角相同，如果第三个值省略，右下角半径与右上角

3、相同，以此类推。除了上面的设置方法以外，还可以单独给元素设置四个不同的圆角，属性和说明如表所示。属性说明border-top-right-radius右上角的圆角border-bottom-right-radius右下角的圆角border-bottom-left-radius左下角的圆角border-top-left-radius左上角的圆角使用CSS设置圆角边框例如设置右上角的圆角为10像素的代码为：border-top-right-radius:10px;例如设置右下角的圆角为20像素的代码为：border-bottom-right-radius:20px;例如设置左下角的圆角为30像素的

4、代码为：border-bottom-left-radius:30px;例如设置左上角的圆角为40像素的代码为：border-top-left-radius:40px;使用CSS设置边框阴影在CSS 3中，使用box-shadow属性来设置边框阴影，格式如下：box-shadow: h-shadow v-shadow blur spread color inset;各属性值和说明如表所示。例如设置水平阴影10像素、垂直阴影10像素、模糊距离5像素、阴影颜色为#88888888的代码为：box-shadow:10px 10px 5px #888888;属性值说明h-shadow水平阴影的位置，必需

5、v-shadow垂直阴影的位置，必需blur模糊距离，可选spread阴影的尺寸，可选color阴影的颜色，可选inset将外部阴影改为内部阴影，可选使用CSS设置图片边框在CSS 3中，可以用border-image属性设置对象的图像边框，格式如下：border-image:border-image-source border-image-slice border-image-width border-image-outset border-image-repeat;各属性值和说明如表所示。属性值说明border-image-source用在边框的图片路径border-image-slice

6、图片边框内侧偏移border-image-width图片边框宽度border-image-outset边框图像区域超出边框的量border-image-repeat图像边框平铺（repeated）、铺满（rounded）或拉伸（streched）使用CSS设置图片边框【例9-4】制作不同样式的边框实例，代码如下所示（示例文件9-4.html）。 bodymargin:30px;background-color:#E9E9E9;.picwidth:300px;padding:10px 10px 20px 10px;background-color:white;box-shadow: 10px 1

7、0px 5px #888888;border:15px solid transparent;border-image:url(images/border4.jpg) 30 30 round;imgborder-top-left-radius: 20px;border-top-right-radius: 20px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;设置了整个页面主体部分的样式，标签选择器为“body”：设置了网页的内边距为30像素；设置了网页的背景颜色为#E9E9E9。设置了类名为.polaroid的

8、div块的样式，第12行设置了宽为300像素，第13行设置了内边距的大小，顺序为上右下左；第14行设置了背景颜色为白色；第15行定义了边框阴影，水平方向为10像素，垂直方向为10像素，模糊距离为5像素，阴影颜色为#888888；第16行设置了边框宽度为15像素，线型为实线，颜色为透明；第17行设置了边框图片，上下方向内侧偏移为30像素，左右方向内侧偏移为30像素，边框图像重复方式为铺满。设置了图片的圆角半径大小，左上为20像素；右上为20像素；左下为10像素；右下为10像素。使用CSS设置图片边框【例9-4】制作不同样式的边框实例，代码如下所示（示例文件9-4.html）。大唐芙蓉园灯会在ch

9、rome浏览器中预览使用CSS修饰表格1. border-collapse属性border-collapse属性用于设置是否将表格边框折叠为单一边框，各属性值和说明如表所示。属性值说明separate边框会被分开，不会忽略 border-spacing 和 empty-cells 属性collapse边框会合并为一个单一的边框，忽略 border-spacing 和 empty-cells 属性inherit从父元素继承 border-collapse 属性的值使用CSS修饰表格2. border-spacing属性border-spacing属性用于设置分隔单元格边框的距离，格式如下：bor

10、der-spacing:lengthlength;length是规定相邻单元的边框之间的距离，使用px、cm等单位，不允许使用负值。如果定义一个length值，那么定义的是水平和垂直间距。如果定义两个length值，那么第一个设置水平间距，第二个设置垂直间距。使用CSS修饰表格3. caption-side属性caption-side属性用于设置表格标题的位置，各属性值和说明如表所示。属性值说明top默认值。把表格标题定位在表格之上。bottom把表格标题定位在表格之下inherit规定应该从父元素继承 caption-side 属性的值。使用CSS修饰表格4. empty-cells属性em

11、pty-cells属性用于设置是否显示表格中的空单元格，各属性值和说明如表所示。属性值描述hide不在空单元格周围绘制边框。show在空单元格周围绘制边框。默认。inherit规定应该从父元素继承 empty-cells 属性的值。使用CSS修饰表格5. table-layout属性table-layout属性用于设置单元格是否自适应其中的内容，各属性值和说明如表所示。属性值说明automatic默认。列宽度由单元格内容设定。fixed列宽由表格宽度和列宽度设定。inherit规定应该从父元素继承table-layout属性的值。使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示

12、（示例文件9-5.html）。tableborder-collapse:separate;border-spacing:10px;caption-side:top;empty-cells:show;table-layout:auto;表示边框会被分开。改为border-collapse:collapse;内部的边框会合并为一条边框设置单元格之间的距离是10像素。改为border-spacing:10px 20px;表示单元格之间水平距离为10像素、垂直距离为20像素使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。tableborder-collap

13、se:separate;border-spacing:10px;caption-side:top;empty-cells:show;table-layout:auto;设置标题在表格上方。改为caption-side:bottom;表示标题在表格下方表示即使单元格内没有内容，也显示该单元格。改为empty-cells: hide;不显示无内容的单元格使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。标题第一季度收益100000元第二季度在chrome浏览器中预览使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。标题第一季度收益100000元第二季度改为使用CSS修饰表格【例9-5】用CSS修饰表格实例，代码如下所示（示例文件9-5.html）。标题第一季度收益100000元第二季度上面的CSS代码改为：table-layout:fixed本行代码改为作业一、选择题1.下列_是定义边框的圆角效果的属性。A border-style B border-width