演示下载今天,我想展示给你一个巧妙的花招。我们将创建一个纯CSS3文本图标。更让人震惊的是,这效果将只需要一个HTML元素。游戏的计划创建一个矩形盒子设置圆角使用伪类元素创建一个卷角效果通过梯度渐变创建文本效果让我们开始吧!第一步:创建盒子让我们加入唯一的HTML元素:一个锚标签。这是有理可依,因为大多数的图标同时也是一个链接。Document Icon可以给图标设置任何尺寸,我们设置为40*56px——只是演示,在实际环境中你可能需要其他尺寸。同时,我们需要添加display:block,因为所有的锚标签默认情况下都是内联函数。.docIcon
{
background:#eee;
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;
}注意,以上,我们设定的定位上下文是为后面伪元素服务。你会发现,我仅仅用了官方CSS3语法中的渐变。你可能会想需要使用浏览器前缀。为了加快速度,你可以用prefixr.com(网
...
继续阅读
(36)