这是一个创建于 3975 天前的主题，其中的信息可能已经有所发展或是发生改变。
前几天在CodePen上面看到一道CSS面试题，模拟一个按钮。当时觉得挺有意思的，就试着做了下，写了篇博客记录了一下
http://pinkyjie.com/2015/03/02/an-interesting-css-interview/
http://pinkyjie.com/2015/03/02/an-interesting-css-interview/
 |
1
leer561 2015 年 3 月 16 日
不错，学习了
|
 |
2
RIcter 2015 年 3 月 17 日 via iPad
赞一个ww
|
 |
3
vivianalive 2015 年 3 月 17 日
这么麻烦，我会用图片来做。
|
 |
4
Keinez 2015 年 3 月 17 日 via Android
看了一下结构和题目，感觉会用到before & after，果然没错。不太喜欢用width和height，早上上班了试试用padding写写。
|
 |
5
P233 2015 年 3 月 17 日
如果两个星星用 :before ，:after 就能用来写圆角背景了
|
 |
6
JenJieJu 2015 年 3 月 17 日 via Android
不错不错
|
 |
7
kmvan 2015 年 3 月 17 日 via Android
体力活，没难度
|
 |
9
sd4399340 OP @vivianalive 实际项目中肯定首选图片了，这个估计主要为了面试
|
 |
11
loading 2015 年 3 月 17 日 via Android
如果你顺便配合css hack，给ie 6上图片版本，基本工作就是你的。
|
 |
12
kstsca 2015 年 3 月 17 日
这个简单qq截图，背景一个。解决
|
 |
13
nijux 2015 年 3 月 17 日
要在加上点击的效果就更好了
|
 |
14
Shazoo 2015 年 3 月 17 日
麦克不克瑞缇娜 <---这是啥？
|
 |
15
kamal 2015 年 3 月 17 日
|
 |
16
luin 2015 年 3 月 17 日
@sd4399340 把 :after 去掉，:before 的 text-shadow 换成 text-shadow: 176px 0 0 #888; 就可以用一个 :before 实现两个星星了。当然原来的阴影效果就没了
|
 |
17
bibizhang 2015 年 3 月 17 日
那个有圆角的高光效果可以用 box-shadow后面加 inset 做内阴影来实现
|
 |
18
b821025551b 2015 年 3 月 17 日
@Shazoo macbook retina
|
 |
22
will0404 2015 年 3 月 17 日
嘿嘿 我觉得我15分钟内能做出来
学到了一点 原来box-shadow可以写多个边框 |
 |
23
ianva 2015 年 3 月 17 日
这个设计好过时，那家公司估计看玩面试题我就不想去了
|
1 |
26
picasso250 2015 年 3 月 17 日
|
|
27
sd4399340 OP |
 |
28
Actrace 2015 年 3 月 18 日
css消耗计算资源。
|
 |
29
crs0910 2015 年 3 月 18 日
@sd4399340 修改了一下，连 after 都省了。http://codepen.io/anon/pen/GgwzWx
|
Select Language