来讲讲：CSS3实例教程:利用border-radius制造文本文档图标

表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
破洛洛文章简介：纯熟利用border-radius.
这个实例的目标：纯熟利用border-radius
触及的属性：border-radius、linear-gradient、box-shadow提醒:“:before”“:after”,IE对after、before是不撑持的，请在firefox、opera、chrome下试调！请求扫瞄器：firefox、opera、chrome最终效果：

登录/注册后可看大图

先看下大抵的步骤：1.界说class，绘制一个矩形；2.用border-radius属性举行对其圆角处置；3.利用pseudo元素创立伸直角；4.创立条则突变的效果。具体步骤第一步：界说class，绘制一个矩形：

<aclass="docIcon"href="#">DocumentIcon</a>

这里要注重下：“display“默许属性值是“inline”,以是我们要利用“block”这个属性值以包管其准确显现：

1. .docIcon{background:#eee;background:-webkit-linear-gradient(top,#ddd0,#eee15%,#fff40%,#fff70%,#eee100%);background:-moz-linear-gradient(top,#ddd0,#eee15%,#fff40%,#fff70%,#eee100%);background:-o-linear-gradient(top,#ddd0,#eee15%,#fff40%,#fff70%,#eee100%);background:-ms-linear-gradient(top,#ddd0,#eee15%,#fff40%,#fff70%,#eee100%);background:linear-gradient(top,#ddd0,#eee15%,#fff40%,#fff70%,#eee100%);border:1pxsolid#ccc;display:block;width:40px;height:56px;position:relative;margin:42pxauto;}

复制代码

这里的linear-gradient是突变效果设置。上面加上暗影效果，利用“box-shadow”属性来完成：

1. .docIcon{...-webkit-box-shadow:insetrgba(255,255,255,0.8)01px1px;-moz-box-shadow:insetrgba(255,255,255,0.8)01px1px;box-shadow:insetrgba(255,255,255,0.8)01px1px;text-indent:-9999em;}

复制代码

这里的box-shadow是暗影效果设置。到今朝为止，我们完成了上面的效果，如图：

登录/注册后可看大图

第二部：用border-radius属性举行对其圆角处置：Border-radius的界说、用法请点击此处懂得。代码：

1. .docIcon{...-webkit-border-radius:3px15px3px3px;-moz-border-radius:3px15px3px3px;border-radius:3px15px3px3px;}

复制代码

如图：

登录/注册后可看大图

Ps:这里要侧重提醒下：before是一个伪类选择器，仅撑持firefox、opera、chrome。人人大概对上面俩步不太懂得，这个不妨，我会针对它们别的写一篇具体的文章。在这个实例傍边，人人只需晓得我们用到过"：before""：after"这个俩个伪类选择器便可。第三部：伸直角

起首，增加“:before”，我们必要创立一个15px的矩形并使用背景突变：

1. .docIcon:before{content:"";display:block;position:absolute;top:0;right:0;width:15px;height:15px;background:#ccc;background:-webkit-linear-gradient(45deg,#fff0,#eee50%,#ccc100%);background:-moz-linear-gradient(45deg,#fff0,#eee50%,#ccc100%);background:-o-linear-gradient(45deg,#fff0,#eee50%,#ccc100%);background:-ms-linear-gradient(45deg,#fff0,#eee50%,#ccc100%);background:linear-gradient(45deg,#fff0,#eee50%,#ccc100%);-webkit-box-shadow:rgba(0,0,0,0.05)-1px1px1px,insetwhite001px;-moz-box-shadow:rgba(0,0,0,0.05)-1px1px1px,insetwhite001px;box-shadow:rgba(0,0,0,0.05)-1px1px1px,insetwhite001px;border-bottom:1pxsolid#ccc;border-left:1pxsolid#ccc;}

复制代码

接上去我们要完成右上角圆角的效果，我们利用不异的办法举行对齐：

...
-webkit-border-radius:3px15px3px3px;
-moz-border-radius:3px15px3px3px;
border-radius:3px15px3px3px;

上面是我们今朝完成的效果：

登录/注册后可看大图

第四步：增加条则突变效果：

上面我们利用“:after”来完成效果，我们出示高度定位0,0。我们使用全体宽度的60%，再加上

登录/注册后可看大图

margin-left和margin-right各20%（也就是100%）：

1. .docIcon:after{content:"";display:block;position:absolute;left:0;top:0;width:60%;margin:22px20%0;height:15px;}

复制代码

用CSS3完成多条线突变：

1. .docIcon:after{...background:#ccc;background:-webkit-linear-gradient(top,#ccc0,#ccc20%,#fff20%,#fff40%,#ccc40%,#ccc60%,#fff60%,#fff80%,#ccc80%,#ccc100%);background:-moz-linear-gradient(top,#ccc0,#ccc20%,#fff20%,#fff40%,#ccc40%,#ccc60%,#fff60%,#fff80%,#ccc80%,#ccc100%);background:-o-linear-gradient(top,#ccc0,#ccc20%,#fff20%,#fff40%,#ccc40%,#ccc60%,#fff60%,#fff80%,#ccc80%,#ccc100%);background:-ms-linear-gradient(top,#ccc0,#ccc20%,#fff20%,#fff40%,#ccc40%,#ccc60%,#fff60%,#fff80%,#ccc80%,#ccc100%);background:linear-gradient(top,#ccc0,#ccc20%,#fff20%,#fff40%,#ccc40%,#ccc60%,#fff60%,#fff80%,#ccc80%,#ccc100%);}

复制代码

最初了局：

登录/注册后可看大图

</p>
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

滚动条)层属性--溢出(visible/hidden/scroll/auto)

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环