html5css3课程-第九章新特性

信赖源于专业CSS3新特性预习检查CSS3和之前版本的CSS相比，增加了哪些功能？如何使用CSS3的属性选择器？2增加了选择器，支持圆角边框，文字特效，半透明。。。。选择器名称[属性=值]{。。。。}Input[type=“text”]{。。。。}了解CSS3的新特性掌握属性选择器掌握CSS3的特效使用方式本章目标3信赖源于专业什么是CSS3是CSS技术的升级版本。CSS3语言开发是朝着模块化发展的.模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。就目前来讲CSS3规范并未成型，浏览器的支持参差不齐。相比CSS2CSS3增加了新的选择器和新的功能参考《》将以前的整个大模块拆分成了一个一个小的模块，降低了复杂度。CSS3将完全向后兼容。CSS3新的特性•属性选择器•半透明效果•边框样式•文本样式•背景色渐变•元素变形•效果过度属性选择器,透明效果

input[type="text"]{ width:180px; } input[type="password"]{ width:280px; } .load{

opacity:0.5 } <inputtype="text"/> <inputtype="password"/> <inputtype="text"class="load"value="欢迎来到KPCP"/> <inputtype="text"value="欢迎来到KPCP"/>

参考：属性选择器.html属性选择器设置透明度，0：不透，1：全透信赖源于专业边框样式CSS3中新增了边框样式，可以做出以前必须用图片才能做出的事情。1.broder-radius:圆角边框 broder-top-left-radius 左上角为圆角 broder-top-right-radius 右上角为圆角 broder-bottom-left-radius 左下角为圆角 broder-bottom-right-radius 右下角为圆角

信赖源于专业信赖源于专业边框样式2.边框阴影：box-shadow：能够为边框添加阴影，并且能够指明方向，颜色等属性#p1{box-shadow:5px3pxblack;} {XY模糊的颜色}#p2{ box-shadow:5px3px3pxblack;} {XY模糊半径颜色}#p3{ box-shadow:003px3pxblack;} {XY模糊半径传播半径颜色}#p4{ box-shadow:inset3px3px3pxblack;} {inset表示内阴影}#p5{ box-shadow:inset3px3px3pxblack,3px3px3pxblack;}{内外阴影}<pid="txt1">普通边框阴影</p><br/><pid="txt2">模糊边框阴影</p><br/><pid="txt3">整体边框阴影</p><br/><pid="txt4">边框内部阴影</p><br/><pid="txt5">边框内外阴影</p><br/>参考：边框.html

信赖源于专业信赖源于专业信赖源于专业文本样式1.文本阴影：#but1{text-shadow:5px3px3pxblack;}{XY模糊半径颜色}<inputtype="button"id="but1"value="阴影"/>2.文本溢出：#div2{width:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}<divid=“div2”>这个地方会溢出</div>参考：文本样式.html

值小伙ellipsis使用符号“…”代替输出clip直接截断输出信赖源于专业信赖源于专业信赖源于专业背景色渐变radial-gradien([方向]，<颜色[范围]>，<颜色[范围]>，<颜色[范围]>);#div1{ height:300px; width:20px; background:-webkit-linear-gradient(top,#9F9,#C60,#F09);}#div2{ background:-webkit-linear-gradient(left,#9F9,#C60,#F09);}<divid="div1">背景色渐变</div><divid="div2">背景色渐变</div>参考：背景色渐变.html

针对的浏览器内核Top,上下。Left，左右信赖源于专业信赖源于专业信赖源于专业信赖源于专业放射渐变radial-gradien([位置]，[大小|形状]，<颜色[范围]>，<颜色[范围]>，<颜色[范围]>);.d{ background:-webkit-radial-gradient(centercenter,50px50px,black40px,white0px);}.a{ background:-webkit-radial-gradient(black,white);}.img{-webkit-mask-image:-webkit-radial-gradient(black100px,rgba(0,0,0,0)240px);}<divclass="a"></div><divclass="d">ddddd</div><imgsrc="psb.jpg"class="img"/></body>参考：放射渐变.html

信赖源于专业信赖源于专业信赖源于专业信赖源于专业信赖源于专业元素变形css3中新曾的transform可用于内联元素（inline）和块级元素（block）,对其进行外观的转换；.rotate{-webkit-transform:rotate(45deg);}<divclass="rotate"><imgsrc="psb.jpg"/>旋转变形</div>Transform支持matrix（矩阵变化）:一次使用多种变形方式-webkit-transform:rotate(45deg)scale(0.5,1.5);参考：元素变形.html

属性名称含义rotate旋转变形scale缩放变形skew倾斜变形translate位移变形信赖源于专业信赖源于专业信赖源于专业信赖源于专业信赖源于专业效果过渡CSS3中，可以通过非常简单的设置，来完成不同要是之间的切换。li{ -webkit-transition-property:all;-webkit-transition-duration:1s;}li.a:hover{-webkit-transform:scale(1.5,1.5);}<ul> <liclass="a">放大</li></ul>参考：效果过渡.html

属性名称含义transition-property设置需要过渡的样式transition-duration设置过渡的时间(单位：秒)transition-delay过渡等待时间(单位：秒)transition-timing-function过滤效果控制All:所有变化都适应信赖源于专业信赖源于专业信赖源于专业信赖源于专业信赖源于专业信赖源于专业效果过渡有的时候我们需要一些特殊的过渡方式，比如控制过渡的节奏，这个时候我们就需要一些算法，在CSS3中，它帮我们集成一些不同的过渡效果（贝赛尔曲线）效果。使用transition-timing-function属性来完成我们所需要的效果。参考：贝赛尔曲线.html

属性名称含义linear匀速ease逐渐变慢ease-in加速ease-out减速ease-in-out先加速后减速信赖源于专业信赖源于专业信赖源于专业信赖源于专业信赖源于专业信赖源于专业信赖源于专业浏览器支持目前市面上的浏览器，对CSS3的支持个不相同，这个相信在不就的将来将会得到完善，目前对CSS3支持的浏览器有：信赖源于专业信赖源于专业信赖源于专业信赖源于专业信赖源于专业信赖源于专业信赖源于专业信赖源于专业CSS3给我们带来的影响1.CSS3向后完全兼容，让我