CSS3高亮条纹按钮

2

CSS3 Button

按钮内部的白色条纹样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.fx-stripes,
.fx-stripes:link {
    position: relative;
    overflow: hidden;
}
 
.fx-stripes:before {
    content: "|||||||||||||||";
    position: absolute;
    top: -50px;
    left: -50px;
    z-index: 1;
 
    line-height: 1;
    font-weight: bold; /* Parametres for stripes */
    color: #fff;
    font-size: 100px;
    letter-spacing: -40px;
    opacity: 0.1;
 
    -moz-transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
}
 
.fx-stripes span {
    position: relative;
    z-index: 3;
}

演示地址:明河

共 2 条评论

  1. 回复

    效果挺不错的。

    • 回复

      恩,我也觉得很实用,无奈国内IE6的市场份额依然很恐怖。

发表评论

您的邮箱不会公开,当您的评论有新的回复时,会通过您填写的邮箱向您发送评论内容。 必填字段 *

为何看不到我发布的评论?

正在提交, 请稍候...