下面的投影是“平”，所以边框线的渐变投影务必做出来，那怎么才能实现边框的纵向渐变，网上有很多关于渐变边框的做法，不过都是横向的利用多重边框的特性来制作，纵向的没有，我尝试用border来写，给border-color写个渐变，结果根本读不出来，单单调节border的透明度也只是做到单色透明，不能渐变透明，观察之后，想出了个“烂点子”，我上面说了，投影是由上至下呈半透明至透明的渐变，那么把两个不透明的东西叠加在一起会怎么样？

比如一个透明度为0.3的层叠在另外一个透明度为0.3的层上面，那就会在交界的地方产生一个透明度为0.6的区域，如图：

说到这样你应该懂了吧，我写了这么一句修改面的宽度：

让两个面半透明面重叠，这样中间重叠区域就会变深，做出了“伪边框”的效果，至于到透明部分，0 + 0 = 0，所以透明的区域依然透明，从而实现了边框纵向渐变的效果。

我原本只是想做个盒子，既然做出来了，当然要跟实际项目联系一下，如果允许的话我也想运用到真正的项目上去，将盒子作为载体模块，在上面发布文章，甚至我想把他弄成可以旋转的做图片墙。

挂上文字后效果如下：

html代码如下：

> > >中秋节要来啦，龙祝大家中秋有月饼吃...哈根达斯冰皮的...> </div>

之所以要在inBox里面套一个conBox，conBox用来设定内边距padding，这样做是因为inBox设定了width，如果width跟padding混在一起叠加，会使容器的宽度变形，所以一般分开为妙；至于h3写个title，是因为我在写gotrip的时候，h1，h2，h3标题没有统一分级，使用混乱，而css是这样写的，比如：.inBox h1{ };

当时写了一批之后有同事提出需要将h1改成h3，如果我一开始就这样写.inBox .title{ }，那他说修改的时候我也就只需要修改html标签，我不用动css的，吃一堑长一智，这里写下来跟大家分享。当然有时候也不必太过强求，毕竟 起类名是一件很伤脑细胞的事 哈。