Question

我喜欢在this page中看起来像纸质笔记的页面部分，带有凸起的阴影边缘或角落。（这个效果叫什么？）

我可以在自己的网站上下载和使用这些类似纸质笔记效果的库吗？

Answer 1

这是通过背景图片完成的，而不是CSS或HTML。

Answer 2

使用Chrome的开发人员工具查看网页，似乎他们已经实现了使用效果，类似于：

<fieldset>

 <label for="one">Label one</label><input id="one" name="one" type="text" />
 <label for="two">Label two</label><input id="two" name="two" type="text" />
 <label for="three">Label three</label><input id="three" name="three" type="text" />

 <!-- 
    Other elements and stuff follow...
-->

</fieldset>

和css，我差不多了，因为我无法看到background-color被设置的位置：

fieldset  {
    background: #80B8D2 url(http://visualrecipes.com/images/form-box-bottom.gif) bottom left no-repeat; }

background:是更详细的简写形式：

fieldset {
background-color: #80B8D2;
background-image: url(http://visualrecipes.com/images/form-box-bottom.gif);
background-position: bottom right; /* given in the form `Y` then `X` here, but typically, if using px/em...etc given using the form `X` then `Y` */
background-repeat: no-repeat;
background-attachment: scroll; /* not specified, above, but the default is scroll, with the alternative being 'fixed' */
}

我认为如果你无法理解效果是如何实现的，那么你可能已经足够新了CSS，你可以从稍微夸张的解释中获益。对不起，如果它似乎光顾，=）

Answer 3

这就像一种享受，但不适用于旧浏览器

http://www.sitepoint.com/pure-css3-paper-curl/

你当然可以用图像作为旧浏览器的备份

网页“纸币效果”

3 个答案: