Web前端开发项目教程 课件 5.1.3CSS3新增盒子模型属性-透明、圆角、边框图像

Web前端开发项目教程主讲人：卞孝丽1.1课程导论项目5美化传统文化网任务5.1创作画像展及图片边框

任务5.2添加创意渐变色与多重图像背景目录任务5.1创作画像展及图片边框【任务效果图】

【任务效果图】★

5.1.1认识盒子模型

★

5.1.2盒子的外边距与内边距★

5.1.3盒子的宽与高【任务效果图】★

5.1.4盒子的边框★

5.1.5盒子的轮廓★5.1.6盒子的阴影

内阴影头像

多重内阴影头像【任务效果图】★5.1.7CSS3新增盒子模型属性

四角半径参数关系

圆角边框效果

边框图片素材

平铺图片边框效果

拉伸图片边框效果

CSS3新增盒子模型属性——透明、圆角、边框图像【任务目标】知识目标掌握CSS3新增盒子模型属性，包括使用rgba颜色模式及opacity属性等多种设置透明效果的方法、圆角属性及边框图像属性。能力目标

能够应用盒子模型的各种规律和特征控制页面元素的显示、布局排版网站页面；提升观察和判断能力，会使用盒子属性美化页面元素、制作常见的盒子模型效果。素质目标

培养耐心细致、精益求精的品质；提升网页制作中的空间感以及创新意识。【导学知识】一、颜色透明度1.rgba颜色模式

rgba是rgb颜色模式的延伸，是在红、绿、篮三原色的基础上添加了不透明度参数，其语法格式是：rgba(red,green,blue,alpha);

前3个参数分别是rgb的颜色色值或百分比，alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。2.opacity属性

opacity属性用于设置整个元素的不透明度，作用范围要比rgba模式大的多，能够使整个元素呈现出透明效果，其语法格式是：opacity:参数;opacity属性的参数是一个介于0（完全透明）到1（完全不透明）之间的浮点数值，0.5表示半透明。注意使用opacity属性为元素添加透明度时，其所有子元素都继承相同的透明度，这可能会使完全透明的元素内的文本难以阅读。不透明度/透明度

opacity属性指定元素的不透明度/透明度。取值范围为0.0-1.0，值越低，越透明，背景与文本颜色都发生变化：如果不希望对子元素应用不透明度，可以使用RGBA的透明度，将RGB颜色值与alpha通道一起使用-该通道指定颜色的不透明度。设置背景色而不是文本的不透明度，只有元素自己的背景色发生变化，子元素及文本的颜色不变：【导学知识】二、圆角

border-radius属性可以将矩形边框的四个角圆角化，能够实现圆形、椭圆形等特殊形状效果的按钮、头像的制作，其语法格式是：border-radius:水平半径参数1水平半径参数2水平半径参数3水平半径参数4/垂直半径参数1垂直半径参数2垂直半径参数3垂直半径参数4;水平半径参数和垂直半径参数之间用“/”隔开，取值单位可以是px（像素值）或%（百分比），每个角的水平和垂直方向均可设置参数值，具体对应关系如图所示。【导学知识】二、圆角

垂直半径参数1垂直半径参数2垂直半径参数4垂直半径参数3水平半径参数1水平半径参数2水平半径参数4水平半径参数3【导学知识】二、圆角

div{

width:600px;

height:600px;

border:2pxsolidred;border-radius:300px;}div{

width:600px;

height:600px;

border:2pxsolidred;border-radius:50%;}【导学知识】三、边框图像

平铺

原始素材

拉伸

【导学知识】三、边框图像

属性说明border-image:sourceslicewidthoutsetrepeat;用于设置所有border-image-*属性的简写属性，例如：border-image:url(jgg.jpg)33%/40px/20pxrepeat;border-image-source:none|image;指定用在边框的图像的路径border-image-slice:number|%|fill;规定图像的上、右、下、左侧边缘的向内偏移，图像被分割为九个区域：四个角、四条边以及一个中间区域。除非使用了关键词fill，否则中间的图像部分会被丢弃。如果省略第四个数值/百分比，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同border-image-width:number|%|auto;指定边框图像的宽度border-image-outset:length|number;指定边框图像区域向盒子外部延伸的距离border-image-repeat:stretch|repeat|round;指定边框图像平铺(repeated)、铺满(rounded)或拉伸(stretched)表border-image相关属性说明【导学知识】二、圆角

p{width:300px;height:300px;background-image:url(touxiang.jpeg);background-size:300px300px;

border-style:solid;border-image-source:url(borderimg.jpg);border-image-slice:33.3%;border-image-width:60px;border-image-outset:0;border-image-repeat:repeat;border-image-repeat:stretch;}【任务小结】

只有真正理解了透明、圆角、边框图像等属性的各