当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS3实例教程 使用border-radius制作文本文档图标

时间:2013-03-02 03:42来源:未知 作者:admin 点击:

标签:CSS3实例教程 使用border-radius制作文本文档图标 教程(56)使用(77)CSS3(90)作文(1)实例(55)
-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
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制作文本文档图标相关文章
上一篇:CSS3实例教程 transitions测试学习 下一篇:CSS3实例教程 探索cal()功能
回到顶部