8、CSS3之新样式解剖.pptx

CSS3之新样式解剖 1 文本高级样式（重点） 1、white-space: nowrap; 作用：用于处理元素内的空白，只在一行内显示。 1 属性选择器（重点） 2、text-overflow: ellipsis; 作用：设定内容溢出时显示省略标记（...）。 注意务必这样用： 1 属性选择器（重点） 3、 text-shadow：设定文本阴影效果。 写法： text-shadow: h-shadow v-shadow [blur] [color]; 例：text-shadow: 5px 5px 10px #F90; /*水平位置 垂直位置 模糊距离 颜色*/ 1 属性选择器（重点） 举一反三 2 颜色样式 1、RGBA(R,G,B,A)属性：设定颜色及透明度。 例：RGBA ( 255, 0, 0, 0.5 ) 颜色 透明度 2 颜色样式 2、opacity属性：设定元素的透明度，值：0~1之间。 2 颜色样式 3、 -webkit-gradient：表示设置渐变色 例：background:-webkit-gradient( linear, left bottom, left top ,from(#f00), to(#ff0)); 3 背景的应用 1、多背景的应用 例：background: url(images/a.jpg) left top no-repeat, url(images/b.jpg) left bottom no-repeat, url(images/c.jpg) right top no-repeat, url(images/d.jpg) right bottom no-repeat; 3 颜色样式 2 颜色样式 案例实战 2 颜色样式 2、background-size ：设置背景图像的尺寸。 例1、backgound-size:100px 100px; 例2： background-size:100% 100%; 例3： background-size:cover; /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/ 例4： background-size:contain; /*把图像图像扩展至最大尺寸，使其宽和度完全适应内容区域。*/ 2 颜色样式 总结 本讲主要学习了CSS3新增选择器。 作业 1、完成课件的案例。 2、完成webthink网页设计。