《Web前端技术项目式教程 任务六 美化网页》由会员分享，可在线阅读，更多相关《Web前端技术项目式教程 任务六 美化网页（35页珍藏版）》请在金锄头文库上搜索。
1、Web前端技术项目式教程（ H T M L 5 + C S S 3 + F l e x + B o o t s t r a p ）任务六美化网页学习目标理解文本阴影属性理解CSS3背景的属性1理解CSS3边框的属性2理解字体图标3掌握设置文本阴影的方法4掌握设置背景透明度以及网页字体图标56知识引入 1.text-shadow text-shadow属性为文本设置阴影，其语法如下。text-shadow: h-shadow v-shadow blur color;点击此处添加脚注信息CSS3是最新的CSS标准。在CSS2中，如果想要实现文字的阴影效果，一般都是使用Photoshop等来实现。但
2、是在CSS3中，这种效果用一个text-shadow属性就能实现了。具体的属性值，如表6-1所示。属性设置示例，如图6-1所示。 表6-1 text-shadow属性属性含义h-shadow必需。水平阴影的位置。允许负值blur可选。模糊的距离color可选。阴影的颜色text-shadow属性设置例6-1 文字阴影h1 background: #7fffd4; width: 740px; padding: 30px; font: bold 55px/100% 微软雅黑; color: #fff; text-shadow: 5px 5px 5px #ee0350;广东云景旅游有限公司LOGO代
3、码效果，如图6-2所示。text-shadow属性设置 x-offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；y-offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，如果其值是负值时，阴影向顶部偏移；blur是指阴影的模糊程度，其值不能是负值，值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将blur值设置为0；color是指阴影的颜色，可以使用rgba色。图6 -2 text-shadow阴影设置效果图1例6-2 文字阴影霓虹灯效果lllllplbackground:#666666;lwidth:740px;lpaddin
4、g:30px;lfont:bold55px/100%微软雅黑;lcolor:#fff;ltext-shadow:005px#fff,0010px#fff,0015px#fff,0040px#ff00de,0070px#ff00de;lllll广东云景旅游有限公司LOGOll可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开，同时增加几个不同的半径值，创造多种不同的阴影效果，例如霓虹灯效果，如图6-3所示。图6 - 3 text-shadow阴影设置效果图22.box-shadow lbox-shadow属性为框添加一个或多个阴影。CSS3的box-shadow有点类似于
5、text-shadow，只不过不同的是text-shadow是给对象的文本设置阴影，而box-shadow是给对象实现图层阴影效果，其语法如下。lbox-shadow: h-shadow v-shadow blur spread color inset;表6-2box-shadow属性属性含义h-shadow必需。水平阴影的位置。允许负值v-shadow必需。垂直阴影的位置。允许负值blur可选。模糊的距离spread可选。阴影的尺寸color可选。阴影的颜色inset可选。将外部阴影（outset）改为内部阴影例6-3 四边具有相同颜色的阴影效果lllbox-shadow效果演示1ll.de
6、molwidth:100px;lheight:100px;lbackground-color:#91e7f2;lposition:absolute;lleft:100px;ltop:20px;lbox-shadow:0010px#f20a59;lllllll在上述代码中只设置阴影模糊的距离和阴影的颜色（HEX值），如图6-4所示。图6 -4 box-shadow阴影设置效果图1给对象四边设计阴影，是通过改变X-OFFSET和Y-OFFSET的正负值来实现，其中X-OFFSET为负值时生成左边阴影，为正值时生成右边阴影；Y-OFFSET为正值是生成底部阴影，为负值时生成顶部阴影。 如图6-5所示
7、 例6-4 四边具有不同颜色的阴影效果box-shadow效果演示2.demo width: 100px; height: 100px; background-color:#91e7f2; position: absolute; left: 100px; top: 20px; .demo1box-shadow:-2px 0 5px green, 0 -2px 5px blue,0 2px 5px red,2px 0 5px #f20a59; 图6 -5 box-shadow阴影设置效果图2 代码中为了向前兼容老版本的浏览器还可以添加相应的前缀。-moz-对应Firefox。-webkit-对应
8、SafariandChrome。-o-对应Opera。-ms-对应Internet Explorer。例如：box-shadow:0 0 10px #f20a59;-moz-box-shadow:0 0 10px #f20a59;-webkit-box-shadow:0 0 10px #f20a59;目前最为主流的浏览器有五大种，分别是IE、Firefox、Google Chrome、Safari、Opera。四大内核分别是：Trident（也称IE内核）、Webkit、Blink、Gecko。浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并将其
9、渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。五大浏览器都是单内核，而随着浏览器的发展现在也出现了双内核浏览器。像360浏览器、QQ浏览器都是采用双内核。3.border-radiusborder-radius 属性为元素添加圆角边框，其语法如下。border-radius: 1-4 length|% / 1-4 length|%;具体的属性值如表6-3所示。表6-3 border-radius属性属性含义length定义圆角的形状%以百分比定义圆角的形状示例效果，如图
10、6-6所示。例6-5 圆角示例1 div width: 250px; height: 100px; line-height: 100px; text-align: center; border-radius: 30px; border: 3px solid red; 广东云景旅游有限公司LOGO 图6 -6 border-radius设置效果图1图6 -7 BORDER-RADIUS属性border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom
11、-left-radius四个属性的简写模式，因此，border-radius : 30px;，其实等价于border-radius : 30px 30px 30px 30px;（注意：与padding和margin一样，各个数字之间用空格隔开）。这里要注意四个数值的书写顺序，不同于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序，如图6-7所示。具体代码如下。div width: 250px; height: 100px; line-height: 100px; text-align: center; border-
12、radius: 50px 0; border: 3px solid red;广东云景旅游有限公司LOGO示例效果，如图6-8所示。4.background4.backgroundbackground背景缩写属性可以在一个声明中设置所有的背景属性，其语法如下。background:bg-colorbg-imageposition/bg-sizebg-repeatbg-originbg-clipbg-attachmentinitial|inherit具体属性含义如下表所示。属性含义bg-color指定要使用的背景颜色bg-imageposition指定要使用的一个或多个背景图像bg-size指定背
13、景图像的位置bg-repeat指定背景图片的大小bg-origin指定如何重复背景图像bg-clip指定背景图像的定位区域bg-attachmentinitial指定背景图像的绘画区域inherit设置背景图像是否固定或者随着页面的其余部分滚动例如:background: #00FF00 url(./images/recruit.jpg) no-repeat fixed center; 以上代码表示：设置区域的背景是红色，图片是images文件夹下的recruit.jpg，不平铺，背景图像不随着页面的其余部分滚动，图片的位置在页面中间。通常建议使用这个属性，而不是分别使用单个属性，因为这个属性
14、在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。如果不设置其中的某个值，也不会出问题，比如直接写 background:url(./images/recruitLeft.png) no-repeat top left;也是允许的。 (1)background-positionbackground-position：属性设置背景图像的起始位置。left,top,right,bottom,center五个值组合显示位置。如果只写第一个，第二个属性默认为center。x% y%；第一个值是水平位置，第二个值是垂直位置。左上角是0% 0%。右下角是100% 100%。如果仅规定了一个值，
15、另一个值将是50%。xpx ypx；第一个值是水平位置，第二个值是垂直位置。(2)background-repeatbackground-repeat：规定如何重复背景图像。默认地，背景图像在水平和垂直方向上重复。repeat-x,repeat-y 背景图像将在水平(垂直)方向重复。no-repeat：不重复。inherit：规定应该从父元素继承background-repeat属性的设置。(3)background-attachment(3)background-attachmentbackground-attachment：规定背景图像是否固定或者随着页面的其余部分滚动。scroll：默认
16、值。背景图像会随着页面其余部分的滚动而移动。fixed：当页面的其余部分滚动时，背景图像不会移动。inherit：规定应该从父元素继承background-attachment属性的设置。5. 5. OpacityOpacityopacity设置一个div元素的透明度级别，其语法如下。opacity: value|inherit;其具体属性如下表所示。属性含义value指定不透明度。从0.0（完全透明）到1.0（完全不透明）inheritopacity属性的值应该从父元素继承所有主流浏览器都支持opacity属性。注意：IE8和早期版本支持另一种过滤器属性filter:Alpha(opacity=50)。例如，以下代码表示透明度为0.8。opacity: 0.8;filter:alpha(opacity=80);6.Font Awesome字体图标图片是有诸多优点，然而目前图片在网站设计行业面临各种各样的挑战。图片不但增加了总文件的大小，还增加了很多额外的“http请求”，这都会大大降低网页的性能。图片还有一个缺点就是不能很好地进行“缩放”，当图片被放大时会失真（即变模糊），当图片进行
