虽然平铺几何图形很棒，但看起来还是有点乏味。**而在自然界中，万事万物皆有不同。**即使是在相似中，也充满了变化和随机因素。你可以看一看花圃：虽然花朵具有一致的艳丽，但也各有各的亮点。这个世界上没有任何两朵花是相同的。这就是为什么我们要尝试让背景图案接近真实，而且我们也在尝试让平铺的元素之间尽量减少缝隙，让它们显得浑然天成自成一体，但是这也会让样式文件的大小超出我们的预期。

在CSS2.1的时代要实现图片边框效果是一种奢侈的想法，但在CSS3中虽然增加了border-image属性实现图片边框，但依旧受到诸多的限制性，其中最大的限制就是浏览器对其支持度。在这一节中，我们介绍了使用多背景，以及配合background-clip、background-origin属性模拟出图片边框效果。

border-radius可以给一个元素制作圆角。险些之外，还可以使用它制作随圆形。而这篇文章中主要阐述了如何使用border-radius制作除圆之外的图形——椭圆形。

平行四边形是矩形的一个超集：它的边是平行的，但是角不一定是直角。在视觉设计，它们往往可以使设计显得更具活力，传达运动感。我们常常使用CSS3 transform中的skew() 来实现，但这种方法常常会使 扭曲元素的内容也会变形，直接影响阅读体验感。那么有什么方案可以解决呢？

菱形裁剪图片在视觉设计中非常常见，但是这种效果没办法直接用CSS完成。实际上，直到最近，这基本上还是不可能做到的。因为，当网页设计师想要使用这种样式，他们通常会先用图像编辑器预裁剪图像。当然，不用想都知道，这对于应用任何效果都不是一种可维护的方式，如果后面有人想要改变图像样式，最后的结果都会变得非常混乱。当然，现在有一个更好的方法，对吧？实际上，有两个耶！

斜切角在Web设计和印刷中是相当受欢迎的样式。它通常是在一个或多个元素的角落切一个45°的角（也就是所谓的斜切角）。特别是最近，扁平化设计的势头压过了拟真设计，也使这种效果更加流行。当斜切角只存在元素的一侧，并且每个都占据元素的50%高度的时候，一个箭头的形状产生了，这在按钮和面包屑导航中非常受欢迎。

梯形应用得比平行四边形更普遍：只有两条边是平行的。另外两条可以是任何角度。以前，它们都是CSS中很难创建的形状，尽管它们特别常用，特别是对于标签。作者要么是通过精心设计的背景图像来模拟它们，要么是一个矩形旁边带两个三角形来创建，或者是通过边框来伪造一下。

在Q&A网站上，我看到的关于box-shadow被问得最多的问题是，阴影如何只应用于物体的单侧（或双侧，问得比较少）。在stackoverflow.com上快速搜索，也能找到将近一千个结果。这是可以理解的，因为单侧阴影能呈现出一个比较细微的、但同样效果逼真的阴影效果。通常情况下，纠结于阴影效果的开发人员甚至会给CSS工作小组发邮件，请求希望能够有新的像box-shadow-bottom这样的属性，来方便他们的开发。但是，这样的效果完全可以通过巧妙地使用我们已经学习并深深喜爱着的box-shadow属性来完成。

当我们想要为矩形或任何可以用border-radius创建的形状应用投影的时候，box-shadow是非常棒的。但是，当我们有伪元素或其他半透明的样式的时候，它可能就不是那么好用了，因为box-shadow会耍赖忽略透明度。那是否有适用这种情况的解决方案呢，还是说这里我们只能完全give up阴影效果了？

为灰度图像添加色调（或已经转换为灰度的图像）是让一组风格非常不同的图像得到视觉上的和谐的一种流行而且优雅的方式。通常情况下，这样的效果是通过:hover或其它的交互来静态地添加和删除的。过去，我们使用一个图像编辑程序来创建两个版本的图像，然后写一些简单的CSS代码来完成它们之间的切换。这种方法是可行的，但是它添加了额外的HTTP请求，而且维护非常麻烦。想象一下如果要改变颜色效果：你需要准备好所有的图像，还要创建新的黑白版本！