前几天在CodePen上面看到一道CSS面试题，模拟一个按钮。当时觉得挺有意思的，就试着做了下，写了篇博客记录了一下
http://pinkyjie.com/2015/03/02/an-interesting-css-interview/
http://pinkyjie.com/2015/03/02/an-interesting-css-interview/
爱意满满的作品展示区。
This topic created in 4259 days ago, the information mentioned may be changed or developed.
 |
leer561Mar 16, 2015
1
不错，学习了
|
 |
RIcterMar 17, 2015 via iPad
2
赞一个ww
|
 |
vivianaliveMar 17, 2015
3
这么麻烦，我会用图片来做。
|
 |
KeinezMar 17, 2015 via Android
4
看了一下结构和题目，感觉会用到before & after，果然没错。不太喜欢用width和height，早上上班了试试用padding写写。
|
 |
P233Mar 17, 2015
5
如果两个星星用 :before ，:after 就能用来写圆角背景了
|
 |
JenJieJuMar 17, 2015 via Android
6
不错不错
|
 |
kmvanMar 17, 2015 via Android
7
体力活，没难度
|
 |
9
@vivianalive 实际项目中肯定首选图片了，这个估计主要为了面试
|
 |
loadingMar 17, 2015 via Android
11
如果你顺便配合css hack，给ie 6上图片版本，基本工作就是你的。
|
 |
kstscaMar 17, 2015
12
这个简单qq截图，背景一个。解决
|
 |
nijuxMar 17, 2015
13
要在加上点击的效果就更好了
|
 |
ShazooMar 17, 2015
14
麦克不克瑞缇娜 <---这是啥？
|
 |
kamalMar 17, 2015
15
|
 |
luinMar 17, 2015
16
@sd4399340 把 :after 去掉，:before 的 text-shadow 换成 text-shadow: 176px 0 0 #888; 就可以用一个 :before 实现两个星星了。当然原来的阴影效果就没了
|
 |
bibizhangMar 17, 2015
17
那个有圆角的高光效果可以用 box-shadow后面加 inset 做内阴影来实现
|
 |
b821025551bMar 17, 2015
18
@Shazoo macbook retina
|
 |
will0404Mar 17, 2015
22
嘿嘿 我觉得我15分钟内能做出来
学到了一点 原来box-shadow可以写多个边框 |
 |
ianvaMar 17, 2015
23
这个设计好过时，那家公司估计看玩面试题我就不想去了
|
1 |
picasso250Mar 17, 2015
26
|
|
27
|
 |
ActraceMar 18, 2015
28
css消耗计算资源。
|
 |
catoncatMar 18, 2015
29
@sd4399340 修改了一下，连 after 都省了。http://codepen.io/anon/pen/GgwzWx
|
Select Language