一道有意思的 CSS 面试题

[sd4399340]

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

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

[un]

@luin 意思是第二个星星实际是第一个的阴影？

[will0404]

嘿嘿 我觉得我15分钟内能做出来
学到了一点 原来box-shadow可以写多个边框

[ianva]

这个设计好过时，那家公司估计看玩面试题我就不想去了

[P233]

@sd4399340 可以输入两个星星，中间加空格 :)

@kamal 问什么要用 text-indent 呢，text-align 更方便吧

[kamal]

@P233 是的，居中更方便，我只是在楼主的代码基础上，修改了你提供的思路。

[picasso250]

我把高光圆角也做出来了，before做两个星星，after做高光圆角

http://codepen.io/anon/pen/ogQqeQ

[sd4399340]

@picasso250
@kamal

Cool，我准备试一下用box-shadow的inset

[Actrace]

css消耗计算资源。

[crs0910]

@sd4399340 修改了一下，连 after 都省了。http://codepen.io/anon/pen/GgwzWx

[sd4399340]

@crs0910 恩，用box-shadow来实现弧度的阴影，上面有人提到了，我昨天也试了下。letter-spacing这个学习了！

[crs0910]

@sd4399340 box-shadow 实现弧度阴影，你那个弧度不对