一道有意思的 CSS 面试题

2015 年 3 月 16 日
 sd4399340
前几天在CodePen上面看到一道CSS面试题，模拟一个按钮。当时觉得挺有意思的，就试着做了下，写了篇博客记录了一下

http://pinkyjie.com/2015/03/02/an-interesting-css-interview/
6878 次点击
所在节点    分享创造
31 条回复
leer561
2015 年 3 月 16 日
不错，学习了
RIcter
2015 年 3 月 17 日
赞一个ww
vivianalive
2015 年 3 月 17 日
这么麻烦，我会用图片来做。
Keinez
2015 年 3 月 17 日
看了一下结构和题目，感觉会用到before & after，果然没错。不太喜欢用width和height，早上上班了试试用padding写写。
P233
2015 年 3 月 17 日
如果两个星星用 :before ，:after 就能用来写圆角背景了
JenJieJu
2015 年 3 月 17 日
不错不错
kmvan
2015 年 3 月 17 日
体力活，没难度
sd4399340
2015 年 3 月 17 日
@P233 好想法，不过一个before能画出来两个星星吗？
sd4399340
2015 年 3 月 17 日
@vivianalive 实际项目中肯定首选图片了，这个估计主要为了面试
sd4399340
2015 年 3 月 17 日
@kmvan 会者不难
loading
2015 年 3 月 17 日
如果你顺便配合css hack，给ie 6上图片版本，基本工作就是你的。
kstsca
2015 年 3 月 17 日
这个简单qq截图，背景一个。解决
nijux
2015 年 3 月 17 日
要在加上点击的效果就更好了
Shazoo
2015 年 3 月 17 日
麦克不克瑞缇娜 <---这是啥？
kamal
2015 年 3 月 17 日
http://codepen.io/anon/pen/NPEwJp
楼主做的不错
@P233 好想法。
luin
2015 年 3 月 17 日
@sd4399340 把 :after 去掉，:before 的 text-shadow 换成 text-shadow: 176px 0 0 #888; 就可以用一个 :before 实现两个星星了。当然原来的阴影效果就没了
bibizhang
2015 年 3 月 17 日
那个有圆角的高光效果可以用 box-shadow后面加 inset 做内阴影来实现
b821025551b
2015 年 3 月 17 日
@Shazoo macbook retina
sd4399340
2015 年 3 月 17 日
@luin 膜拜，太机智了！
sd4399340
2015 年 3 月 17 日
@bibizhang 都太机智了！醍醐灌顶！

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://study.congcong.us/t/177397

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX