一道有意思的 CSS 面试题

V2EX = way to explore

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

For Existing Member Sign In

爱意满满的作品展示区。

This topic created in 4074 days ago, the information mentioned may be changed or developed.

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

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

CSS

codepen

面试

31 replies • 2015-03-18 22:38:54 +08:00

leer561

Mar 16, 2015

不错，学习了

RIcter

Mar 17, 2015 via iPad

赞一个ww

vivianalive

Mar 17, 2015

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

Keinez

Mar 17, 2015 via Android

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

P233

Mar 17, 2015

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

JenJieJu

Mar 17, 2015 via Android

不错不错

kmvan

Mar 17, 2015 via Android

体力活，没难度

sd4399340

Mar 17, 2015 via iPhone

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

sd4399340

Mar 17, 2015 via iPhone

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

sd4399340

Mar 17, 2015 via iPhone

@kmvan 会者不难

loading

Mar 17, 2015 via Android

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

kstsca

Mar 17, 2015

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

nijux

Mar 17, 2015

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

Shazoo

Mar 17, 2015

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

kamal

Mar 17, 2015

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

luin

Mar 17, 2015

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

bibizhang

Mar 17, 2015

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

b821025551b

Mar 17, 2015

@Shazoo macbook retina

sd4399340

Mar 17, 2015 via iPhone

@luin 膜拜，太机智了！

sd4399340

Mar 17, 2015 via iPhone

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

Mar 17, 2015

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

will0404

Mar 17, 2015

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

ianva

Mar 17, 2015

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

P233

Mar 17, 2015

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

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

kamal

Mar 17, 2015

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

picasso250

Mar 17, 2015

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

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

sd4399340

Mar 17, 2015

@picasso250
@kamal

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

Actrace

Mar 18, 2015

css消耗计算资源。

catoncat

Mar 18, 2015

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

sd4399340

Mar 18, 2015

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

catoncat

Mar 18, 2015

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