教你一俩手-用CSS3创建文本文档按钮

类别：CSS3 | 发布时间:2012-5-11 15:45:19 | 网迅科技　 | 　阅读次数：　

这个实例的目的：熟练使用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，绘制一个矩形：
 

复制代码


这里要注意下：“display“默认属性值是“inline”,所以我们要使用“block”这个属性值以保证其正确显示：


 

  1. .docIcon {
     

  2.  
  3.    background: #eee;
     

  4.  
  5.    background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
     

  6.  
  7.    background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
     

  8.  
  9.    background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
     

  10.  
  11.    background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
     

  12.  
  13.     background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
     

  14.  
  15.    border: 1px solid #ccc;
     

  16.  
  17.    display: block;
     

  18.  
  19.    width: 40px;
     

  20.  
  21.    height: 56px;
     

  22.  
  23.    position: relative;
     

  24.  
  25.    margin: 42px auto;
     

  26.  
  27. }
复制代码


下面加上阴影效果，使用“box-shadow ”属性来实现：

 

  1. .docIcon
     

  2.  
  3. {
     

  4.  
  5.    ...
     

  6.  
  7.     -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
     

  8.  
  9.     -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
     

  10.  
  11.     box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
     

  12.  
  13.     text-indent:-9999em;
     

  14.  
  15. }
复制代码


到目前为止，我们完成了下面的效果，如图：


第二部：用border-radius属性进行对其圆角处理：

Border-radius的定义、用法请点击此处了解。代码：
 

  1. .docIcon
     

  2.  
  3. {
     

  4.  
  5.     ...
     

  6.  
  7.     -webkit-border-radius:3px 15px 3px 3px;
     

  8.  
  9.     -moz-border-radius:3px 15px 3px 3px;
     

  10.  
  11.     border-radius:3px 15px 3px 3px;
     

  12.  
  13. }
复制代码


如图：


Ps:这里要着重提示下：before是一个伪类选择器，仅支持firefox、opera、chrome。
大家可能对下面俩步不太了解，这个没关系，我会针对它们另外写一篇详细的文章。在这个实例当中，大家只要知道我们用到过"：before""：after"这个俩个伪类选择器即可。


第三部：蜷缩角

首先，添加“:before”，我们需要创建一个15px的矩形并应用背景渐变：

 

  1. .docIcon:before {
     

  2.  
  3.    content: "";
     

  4.  
  5.    display: block;
     

  6.  
  7.    position: absolute;
     

  8.  
  9.    top: 0;
     

  10.  
  11.    right: 0;
     

  12.  
  13.    width: 15px;
     

  14.  
  15.    height: 15px;
     

  16.  
  17.    background: #ccc;
     

  18.  
  19.    background: -webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
     

  20.  
  21.    background: -moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
     

  22.  
  23.    background: -o-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
     

  24.  
  25.    background: -ms-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
     

  26.  
  27.    background: linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
     

  28.  
  29.    -webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
     

  30.  
  31.    -moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
     

  32.  
  33.    box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
     

  34.  
  35.    border-bottom: 1px solid #ccc;
     
  36.    border-left: 1px solid #ccc;
     

  37.  
  38. }
复制代码



接下来我们要实现右上角圆角的效果，我们使用相同的方法进行对齐：

 

  1. ...
     
  2. -webkit-border-radius:3px 15px 3px 3px;
     
  3. -moz-border-radius:3px 15px 3px 3px;
     
  4. border-radius:3px 15px 3px 3px;
复制代码


下面是我们目前实现的效果：


第四步：添加条文渐变效果：

下面我们使用“:after”来实现效果，我们出示高度定位0,0。我们应用整体宽度的60%，再加上



 

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



 

  1. .docIcon:after
     

  2.  
  3. {
     

  4.  
  5.     content:"";
     

  6.  
  7.     display:block;
     

  8.  
  9.     position:absolute;
     

  10.  
  11.     left:0;
     

  12.  
  13.     top:0;
     

  14.  
  15.     width:60%;
     

  16.  
  17.     margin:22px 20% 0;
     

  18.  
  19.     height:15px;
     

  20.  
  21. }
复制代码


 

用CSS3实现多条线渐变：

  1. .docIcon:after
     

  2.  
  3. {
     

  4.  
  5.     ...
     

  6.  
  7.     background:#ccc;
     

  8.  
  9.     background: -webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
     

  10.  
  11.     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%);
     

  12.  
  13.     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%);
     

  14.  
  15.     background: -ms-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
     

  16.  
  17.     background:linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
     

  18.  
  19. }
复制代码


最后结果：




 

此文关键字：html5,移动互联网,CSS3,js

在线项目合作

网迅科技结合创新的设计理念与专业技术，为客户制定从策划到创意再到技术的系列支持，帮助企业通过全新的媒体展示平台实现更多价值。如果您喜欢我们的项目，有兴趣合作？请您联系我们，以便我们能够为您提供可行的价值服务。

项目需求提交
宝鸡SEO优化

宝鸡网迅科技信息技术有限公司

地址:陕西省宝鸡市渭滨区石鼓工业园区
热线: 13619177922
传真: 0917 - 3639162
Email: wangxuntech@163.com
业务QQ: 278260220 , 2446392356
ICP编号: 陕ICP备15006670号
陕公网安备 61030202000249号

热线电话:网迅科技客服热线 13619177922

关于我们

宝鸡网迅科技是集宝鸡网站建设、响应式网站开发、营销型网站建设、网站SEO优化、企业网络营销、企业office定制培训、大学精品资源课程建设、企业招投标PPT设计与制作等服务的信息化服务公司。网迅科技结合创新的设计理念与专业技术，为客户提供整合的网站开发及SEO优化方案，帮助企业通过全新的媒体展示平台，实现全网营销，获取更多价值...


@2015 wangxunkeji.net Design | 钛锻件 | 钛棒| 钛合金棒| TC4钛合金 | 钛靶| 钛合金锻件| 钛环

| yorimetal