《
CSS3实例教程 使用border-radius制作文本文档图标》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332242013.htm
-webkit-border-radius:3px 15px 3px 3px;
.docIcon:after { ... background:#ccc; background: -webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%,CSS3实例教程 transitions测试学习, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); background: -moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); background: -o-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); background: -ms-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%,CSS3实例教程 box-shadow阴影和表格阴影, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%); background:linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%,CSS3实例学习教程 data类型的Url, #ccc 100%); }
最后成果：
margin-left跟margin-right各20%（也就是100%）：
第四步：增添条文渐变效果：
下面我们应用“:after”来实现后果，咱们出示高度定位0,0。我们利用整体宽度的60%，再加上
,CSS3如何制作遨游LOGO;
这个实例的目标：纯熟使用border-radius
--> [
网站建设之]CSS3实例教程:使用border-radius制作文本文档图标
-moz-border-radius:3px 15px 3px 3px;
Tag：文本 文档 图标 制造 实例 教程 使用 文本 文档 图标 制作 实例 教程 使用
波及的属性：border-radius 、linear-gradient 、 box-shadow 提示:“:before” “:after”,IE对after、before是不支持的，请在firefox、opera、chrome下试调！ 请求阅读器：firefox、opera、chrome 效果图：
先看下大抵的步骤： 1.定义class，绘制一个矩形； 2.用border-radius属性进行对其圆角处置； 3,
css3基础教程：详解border color.使用pseudo元素创建蜷缩角； 4.创建条文渐变的效果。 具体步骤 第一步：定义class，绘制一个矩形：
<a class="docIcon" href="#">Document Icon</a>
这里要留神下：“display“默认属性值是“inline”,所以我们要使用“block”这个属性值以保障其准确显示：
.docIcon:after { content:""; display:block; position:absolute; left:0,CSS3基础教程：详解background-size; top:0; width:60%; margin:22px 20% 0; height:15px; }
用CSS3实现多条线渐变：
border-radius:3px 15px 3px 3px;
下面是我们目前实现的效果：
.docIcon { background: #eee; background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%,CSS3基础教程：box-shadow属性, #eee 100%); background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%); border: 1px solid #ccc; display: block; width: 40px; height: 56px; position: relative; margin: 42px auto; }
这里的linear-gradient是渐变效果设置。 下面加上阴影效果，使用“box-shadow ”属性来实现：
.docIcon { ... -webkit-box-shadow:inset rgba(255,255,255,css3圆角IE的兼容方法,0.8) 0 1px 1px; -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px,CSS3和jQuery动态时钟制作过程; box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px; text-indent:-9999em; }
这里的box-shadow是暗影效果设置。 到目前为止，我们实现了下面的效果，如图：
第二部：用border-radius属性进行对其圆角处理： Border-radius的定义、用法请点击此处了解。代码：
.docIcon { ... -webkit-border-radius:3px 15px 3px 3px,css3制作网页实例 点击切换不同的CSS列表; -moz-border-radius:3px 15px 3px 3px; border-radius:3px 15px 3px 3px; }
如图：
Ps:这里要侧重提醒下：before是一个伪类取舍器，仅支撑firefox、opera、chrome。 大家可能对下面俩步不太懂得，这个不要紧，我会针对它们另外写一篇详细的文章。在这个实例当中，大家只有晓得我们用到过"：before""：after"这个俩个伪类抉择器即可。 第三部：蜷缩角
首先，增加“:before”，我们须要创立一个15px的矩形并运用背景渐变：
.docIcon:before { content: ""; display: block; position: absolute; top: 0; right: 0; width: 15px; height: 15px; background: #ccc; background: -webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%); background: -moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%); background: -o-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%); background: -ms-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%); background: linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%); -webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px; -moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px; box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; }
接下来我们要实现右上角圆角的效果，我们使用雷同的方式进行对齐：
...
(责任编辑：网站建设)
CSS3实例教程 使用border-radius制作文本文档图标相关文章