TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Ask YC: How does facebook round corners on users' pictures?

18 点作者 ashishk大约 16 年前
My initial guess would be Jscript. Although it could also be done using a transparent image over the users picture

5 条评论

nirmal大约 16 年前
They use the CSS Sprite technique to overlay a certain portion of this image <a href="http://static.ak.fbcdn.net/images/ui/UIRoundedImage.png" rel="nofollow">http://static.ak.fbcdn.net/images/ui/UIRoundedImage.png</a> on top of your picture. It's hard to see in the browser but above the blue rounded corner mask there is a white corner mask.
jmtulloss大约 16 年前
As you can see, this question has been answered, but in the future you should consider using Firebug (<a href="http://getfirebug.com/" rel="nofollow">http://getfirebug.com/</a>). With firebug, you can inspect any element on a web page and see exactly how things are done. I've learned all sorts of tricks this way.
评论 #586884 未加载
mcav大约 16 年前
<a href="http://static.ak.fbcdn.net/images/ui/UIRoundedImage.png" rel="nofollow">http://static.ak.fbcdn.net/images/ui/UIRoundedImage.png</a><p>They overlay that image on top.
talleyrand大约 16 年前
Here's a good tutorial on the technique: <a href="http://cssglobe.com/post/3714/css-sprites-rounded-corners/" rel="nofollow">http://cssglobe.com/post/3714/css-sprites-rounded-corners/</a>
mindhacker大约 16 年前
The question has been answered already but if you'd like to see it for yourself, you can right click on the image and hit "View Background Image".