支付宝登录的清空历史帐号信息的按钮是怎么做的？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 5004 天前的主题，其中的信息可能已经有所发展或是发生改变。

当你输入过支付宝账户后，下次登录账号框里能看到之前的帐号。点击X清空这个帐号。

看了CSS半天摸不到头绪。

<span class="chacha"></span>

https://static.alipay.com/build/css/home/home-index.css

只知道是由两个正斜杠和反斜杠组成的。没有找到相关的样式表。。

帐号

斜杠

span

5 条回复 • 1970-01-01 08:00:00 +08:00

aligo

2011-04-12 20:02:10 +08:00

background:url(https://img.alipay.com/home/chacha.png) no-repeat -2px -3px\0;

Sai

2011-04-12 20:03:12 +08:00

制作人员太喜感了，「叉叉」。

fim8

2011-04-12 20:23:33 +08:00

.chacha {
display: block;
text-indent: -9999px;
background: #efefef;
background: url(https: //img.alipay.com/home/chacha.png) no-repeat -2px -3px\0;
width: 17px;
height: 17px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
cursor: pointer;
position: absolute;
top: 60px;
left: 189px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.chacha:before,.chacha:after {
content: "";
display: block;
display: none\0;
width: 3px;
height: 11px;
position: relative;
left: 7px;
top: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #bcbbbb;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.chacha:after {
top: -8px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.chacha: hover {
-webkit-box-shadow: 0 0 4px #aaa;
-moz-box-shadow: 0 0 4px #aaa;
box-shadow: 0 0 4px #aaa;
}

整理了一下，出现了\0所以FIREBUG没读取，但是火狐本身却显示了出来。
一个小图标整这么多代码，是想表达什么呢？难道没有更简单的方法吗？

gonghao

2011-04-12 20:48:14 +08:00

\0是让IE系浏览器使用，其他浏览器没用背景图片实现效果，因此代码比较长~LZ静下心来慢慢看吧~

lychee

2011-04-12 21:22:35 +08:00

最简单的方法是用图片..但是为了节省一个http请求或者是sprit的大小所以用了这么极端的用元素模拟
.chacha是圆背景
.chacha:before, .chacha:after 是两个伪元素一个45度左旋一个45右旋组成一个X