基于Web标准的网ppt课件.ppt

《基于Web标准的网ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS圆角设计本节课内容border-radius圆角盒子属性，实际是box-radius饼状图过渡属性transition图标变文字阴影属性box-shadowborder-radius属性border-radius：用于设置元素盒子四个角的圆角效果border-radius:5px10px20px40px;/*上左上右下右下左*/border-radius:5px10px20px;/*上右和下左都是10px*/border-radius:5px10px;border-radius:10px;/*四个角的半径都是10px*/border-radius属性示例div{wi

2、dth:100px;height:100px;background:#C96;}.box1{border-radius:100px;}.box2{border-radius:100px0;}.box3{height:50px;border-radius:50%;}.box4{border-radius:50%;background:url(images/head01.jpg)no-repeat;background-size:cover;}.box5{height:50px;border-radius:50px50px00;}制作饼状图display属性display:b

3、lock;以块级元素显示display:inline;以行内元素显示display:inline-block;以行内块元素显示，行内块元素将在一行内水平排列，但每个元素又具有块级元素的特点display:none;将元素隐藏，且不占据网页空间过渡属性transitionCSS的动态伪类(如hover)能为网页添加一些动态效果，但动态伪类没有中间状态过渡属性就是让一个属性在两种状态之间平滑改变的动画。transition:color.5sease-in.1s;/*作用属性持续时间速度变化延迟*/transition:color.5s.1s;/*作用属性持续时间延迟*/tra

4、nsition:color.5s;/*作用属性持续时间*/transition属性的子属性transition属性实际上是4个属性的简写transiton:transition-propertytransition-durationtransition-timing-functiontransition-delay;transiton-property：指定在元素的某个属性上有动画效果transition-duration：指定过渡的持续时间。transition-timing-function：能够让动画在过渡持续期间在速度上有变化transition-delay：用于

5、延迟一段时间后再开启过渡效果transition应用举例图像渐变列表文本移动图标变文字阴影属性box-shadowbox-shadow:h-shadowv-shadowblur[spread]color[inset];box-shadow:10px10px5px#888888;/*设置左下角阴影，*/box-shadow:0015px#888888;/*设置外发光，*/box-shadow:10px10px5px#888888inset;/*设置内凹阴影，*/翘边阴影和曲线阴影圆角的设计方法圆角在网页设计中让人又爱又恨，一方面设计师为追求美观的效果经常需要借助于圆角，另一

6、方面为了在网页中设计圆角又不得不增添很多工作量。制作固定宽度的圆角（不带边框的、带边框的）制作可变宽度圆角（不带边框的、带边框的）不用图片做圆角1.制作固定宽度的圆角框用CSS制作不带边框的固定宽度圆角框（如图4-57左所示）至少需要两个盒子，一个盒子放置顶部的圆角图案，另一个盒子放置底部的圆角图案，并使它位于盒子底部。把这两个盒子叠放在一起，再对栏目框设置和圆角相同的背景色就可以了制作带边框的固定宽度圆角框（如图4-57右所示）则至少需要三个盒子，最底层的盒子放置圆角框中部的边框和背景组成的图案，并使它垂直平铺，上面两层的盒子分别放置顶部的圆角和底部的圆角，这样在顶部和

7、底部圆角图片就遮盖了中部的图案，形成了完整的圆角框2.制作可变宽度圆角制作可变宽度不带边框的圆角框就是前面介绍的4图像法制作圆角框，而要制作带边框的可变宽度圆角则要采用5图像二维滑动门方法3.不用图片做圆角－山顶角方法如果不想用图片做圆角，那也是可以实现的，这需要一种称为山顶角(mountaintopcorner)的圆角制作方法，所谓山顶角，就是说不是纯粹意义上的平滑圆角，而是通过几个1像素高的div（水平细线）叠放起来形成视觉上的圆角，用这种方法做圆角一般采用4个div叠放，所以圆角的弧度不是很大。3.不用图片做圆角－山顶角