一道有意思的 CSS 面试题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3542 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

CSS

codepen

面试

31 条回复 • 2015-03-18 22:38:54 +08:00

leer561

2015-03-16 23:59:18 +08:00

不错，学习了

RIcter

2015-03-17 00:15:05 +08:00 via iPad

赞一个ww

vivianalive

2015-03-17 00:20:36 +08:00

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

Keinez

2015-03-17 05:16:28 +08:00 via Android

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

P233

2015-03-17 05:56:51 +08:00

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

JenJieJu

2015-03-17 07:26:21 +08:00 via Android

不错不错

kmvan

2015-03-17 08:47:15 +08:00 via Android

体力活，没难度

sd4399340

2015-03-17 08:56:47 +08:00 via iPhone

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

sd4399340

2015-03-17 08:58:03 +08:00 via iPhone

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

sd4399340

2015-03-17 08:58:34 +08:00 via iPhone

@kmvan 会者不难

loading

2015-03-17 09:12:22 +08:00 via Android

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

kstsca

2015-03-17 09:21:53 +08:00

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

nijux

2015-03-17 09:32:00 +08:00

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

Shazoo

2015-03-17 09:45:25 +08:00

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

kamal

2015-03-17 09:46:32 +08:00

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

luin

2015-03-17 09:52:24 +08:00

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

bibizhang

2015-03-17 10:01:39 +08:00

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

b821025551b

2015-03-17 10:02:18 +08:00

@Shazoo macbook retina

sd4399340

2015-03-17 11:21:55 +08:00 via iPhone

@luin 膜拜，太机智了！

sd4399340

2015-03-17 11:23:01 +08:00 via iPhone

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

2015-03-17 12:34:30 +08:00

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

will0404

2015-03-17 13:06:23 +08:00

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

ianva

2015-03-17 13:11:36 +08:00

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

P233

2015-03-17 15:34:10 +08:00

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

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

kamal

2015-03-17 16:57:34 +08:00

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

picasso250

2015-03-17 19:15:13 +08:00

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

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

sd4399340

2015-03-17 20:32:05 +08:00

@picasso250
@kamal

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

Actrace

2015-03-18 10:39:24 +08:00

css消耗计算资源。

crs0910

2015-03-18 15:02:17 +08:00

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

sd4399340

2015-03-18 20:11:26 +08:00

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

crs0910

2015-03-18 22:38:54 +08:00

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