Box-shadow效果是CSS3中很实用的属性之一，现在网站大量的阴影效果都是通过这个属性来制作，今天整理了23个盒子阴影效果以供大家参考。当然这个案例中的效果不单单是一些简单的box-shadow效果，在整个案例中，有些效果使用了CSS3的伪类选择器，以及CSS3的transform等属性，制作了一些特殊的box-shadow效果，感兴趣的往下吧。

这个DEMO是来自于Red Team Design。这个站点是一个学习CSS3的好去处，简单明了，也是我常常去逛的一个网站。今天收到一个CSS3效果，就类似于一张图片四个角使用一个折角遮盖的效果。在整个效果制作中使用了两个标签配合“:after”和“:before”制作了四个折角，同时使用旋转transform以及定位到每个角落上，其中最难的一点就是，使用gradient制作了四个切角效果，这个效果在《CSS3+jQuery制作切角的Tabs》一文中有做过详细介绍。接下来将这个效果使用代码展现给大家。希望大家通过这个案例会有所收获。

今天的案例是个老案例，使用ＣＳＳ３代码来制作３D按钮效果，ｗ３ｃｐｌｕｓ有关于ｂｕｔｔｏｎｓ的介绍已经很多，如果你没有看过，不仿点击这里。今天藤藤给大家带来的还是一个系列的３D按钮制作效果，制作方法是老套（万变不离其中），但其中色彩的调各让我很折服，因为很多效果在ｐｓ中制作是容易，特别对于设计师来说更容易，但对于一名ｃｏｄｅｒ来说，还是有点困难，具体请看制作的代码，让代码来展现所有的一切。我想您和我一样会为这样的效果折服，至少我已膜拜藤藤以ｃｓｓ３的了解，以及其对制作过程中的细节的追求。

今天这个案例不单单是一个CSS3的练习案例，他还是一个按钮库，在这个基础上你可以演变更多的按钮效果。说得在大一点，这个案例还能让你了解如何组织你的CSS代码。当然这个案例中的效果制作的非常的细腻，藤藤花了很多心思，正如她所说，在制作这些按钮时，学到很多新的东西，CSS3的属性运用就不多说了，还学到了如何组织代码，如何供用共性的东西等等，如果你感兴趣不仿跟藤藤一起做一下这个案例，我想你会有所收获的。

这是一个CSS3使用gradient、box-shadow制作的按钮集合，在w3cplus有关于按钮方面的实例不少，随便搜索css3 button就会有大把相关介绍。今天老调重谈，还是使用按钮的制作，不过这里想给大家呈现的一种思想是，只要你敢想，就有实现的方法，在这里一共展示了15种不同颜色的按钮，而且在":hover"和“:active”下都有不同的效果。制作方法是一样，但配色，特别是gradient实现渐变色还是需要一定的功底的，不信你就试试吧，我可是信了，因为我也做不到。（^_^）

这个案例主要使用css3来制作标签，不过使用的的属性还是常见的那几种，可是要实现还是有一定的难度。其中最有亮点的是使用css3来实现斜线背景以及方格背景，然后就是使用@font-face来制作icon图标。原理简单，重要的是思路，以及这两种背景实现的细节。感兴趣的同学直接看源码。

今天使用百度图片搜索图片时，无意之中看到首页的图片展示效果具有旋转、阴影等效果。好奇之下查看其源码，使用了一些CSS3属性制作，但不知道出与什么原因，在制作这个效果中并不什么完美（我个人认为），于是动手自己整了一个，放上来与大家分享，希望大家喜欢

今天与大家分享一款使用CSS3制作的Twitter信息分享框。在这个DEMO中，使用的CSS3属性还是那么几个，css3的渐变gradient，盒子阴影box-shadow，css3的选择器等，不过在这个案例中两个特色之处，一个是使用了":before"配合gradient制作了内凹圆角效果，类似于chrome浏览器上的tabs效果，这个效果可有点难度（思路来自于Tabs with Round Out Borders）,还有一个亮点就是使用gradient制作了渐变的线条。想一探究竟的同学，看下面的代码吧。

藤藤今天给大家带来一款使用CSS3制作的3D立体表单效果。在这个案例中主要使用了CSS3的渐变制作了body的背景；使用box-shadow制作的3D立体input框和3D立体按钮；使用@font-face制作的icon图标。