一道有意思的 CSS 面试题

[sd4399340]

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

http://pinkyjie.com/2015/03/02/an-interesting-css-interview/

[leer561]

不错，学习了

[RIcter]

赞一个ww

[vivianalive]

这么麻烦，我会用图片来做。

[Keinez]

看了一下结构和题目，感觉会用到before & after，果然没错。不太喜欢用width和height，早上上班了试试用padding写写。

[P233]

如果两个星星用 :before ，:after 就能用来写圆角背景了

[JenJieJu]

不错不错

[kmvan]

体力活，没难度

[sd4399340]

@P233 好想法，不过一个before能画出来两个星星吗？

[sd4399340]

@vivianalive 实际项目中肯定首选图片了，这个估计主要为了面试

[sd4399340]

@kmvan 会者不难

[loading]

如果你顺便配合css hack，给ie 6上图片版本，基本工作就是你的。

[kstsca]

这个简单qq截图，背景一个。解决

[nijux]

要在加上点击的效果就更好了

[Shazoo]

麦克不克瑞缇娜 <---这是啥？

[kamal]

http://codepen.io/anon/pen/NPEwJp
楼主做的不错
@P233 好想法。

[luin]

@sd4399340 把 :after 去掉，:before 的 text-shadow 换成 text-shadow: 176px 0 0 #888; 就可以用一个 :before 实现两个星星了。当然原来的阴影效果就没了

[bibizhang]

那个有圆角的高光效果可以用 box-shadow后面加 inset 做内阴影来实现

[b821025551b]

@Shazoo macbook retina

[sd4399340]

@luin 膜拜，太机智了！

[sd4399340]

@bibizhang 都太机智了！醍醐灌顶！