简单可爱的蓝色盒子

Question

有没有人知道“浏览类别”下的这些可爱的蓝框是如何创建的？是简单的css和javascript吗？

一旦我知道它们的名字是什么，我就可以用谷歌搜索“可爱的蓝盒子生成器”之类的东西。

带有可爱方框的网址：http://vimeo.com/categories

Answer 1

大多数的样式是简单地添加圆角到一个浅蓝色的方框。在CSS中，可以使用以下命令(在现代浏览器中)实现类似的效果：

li {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

注意: Vimeo只使用一张图片作为背景：

http://a.vimeocdn.com/images/categories/cat_browse_on.png

Answer 2

这是一个用CSS放在那里的简单背景图片：

#cat_browse ul li.highlight {
    background: url(http://a.vimeocdn.com/images/categories/cat_browse_off.png);
}

​

​