CSS3教程:使用border-radius制作文本文档图

.docIcon 
{ 
    ... 
    -webkit-border-radius:3px 15px 3px 3px; 
    -moz-border-radius:3px 15px 3px 3px; 
    border-radius:3px 15px 3px 3px; 
} 

大家可能对下面俩步不太了解，这个没关系，我会针对它们另外写一篇详细的文章。在这个实例当中，大家只要知道我们用到过"：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; 
} 

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

...

-webkit-border-radius:3px 15px 3px 3px;

-moz-border-radius:3px 15px 3px 3px;

border-radius:3px 15px 3px 3px;

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

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

 

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

 

 

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

用CSS3实现多条线渐变：

.docIcon:after 
{ 
    ... 
    background:#ccc; 
    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%); 
    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%, #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%, #ccc 100%); 
}