上一篇
下一篇
您的位置

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

酷酷
5
评论:0
2017/7/15

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

<a class="docIcon" href="#">Document Icon</a>

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

.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%, #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,0.8) 0 1px 1px;     -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;     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;     -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; } 

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

...

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

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

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

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


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

 

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

 

 

margin-left和margin-right各20%(也就是100%):

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



最后结果:

本文地址
更多>>网友评论
发表评论
网站首页  | 关于本站  | 联系我们  | 积分说明  | 问题建议