用纯CSS3打造立体提示模块的效果实现(图) 附源码

最近一些日子都在看JS方面的书，写小游戏，好久没写CSS了，昨天看了一个纯CSS3进度条的例子，感觉很有创意，尤其是用background-size来repeat渐变斜线这招，妙不可言。今天再浩方打dota的时候刷不进房间，看到它弹出一个提示框，如下：

　　发现跟进度条有个共通点，于是手痒参考了它写了这个模块，略做修改，效果图如下：

　　代码我只写了moz，没写webkit，可自行添加，下面我对该模块要点进行分析：
　　1、结构
　　整个模块是一个tipsBox，然后里面hd放左侧标题，bd放内容，每个标题用tipsTitle来写基本样式，默认绿色，然后用blue、yellow多类名权重覆盖的方式来实现多种底色标题。
　　2、折角
　　右上角有个像纸张的折角，增加模块的立体感。如果你看了我的代码，会发现里面没有多余挂折角的钩子，那是因为我用了tipsBox的伪类beforeafter来实现的。在设定了基本的宽高后，主要是设置颜色，我设置before的颜色代码如下：
　　-moz-linear-gradient(-135deg,#e6f2fe 50%,#fff 50%);
　　看懂了吗?就是一个打斜的线性渐变，但是不存在过渡，而是再50%这里明显分界，0%-50%跟背景底色一样，50%-100%用白色，这样就出现了一个假象：tipsBox右上角缺了一个三角形。然后设置after的z-index比before低，用来投影，不过after的大小比before略小些，因为如果投影的话宽高都会增加，这样会越过before右上角的底色区域，就穿帮啦，没人规定投影不能比本身尺寸小对吧，所以调节一下再稍加旋转，这样就出现了一个折角，又不会穿帮。
　　3、标题项
　　标题项目tipsTitle控制基本的样式，其中一些基本的宽高定位这些就不说咯，拉一个从左向右的线性渐变由浅到深，一般光源在左侧看起来比较顺眼，主要还是说下伪类的作用，我用after来做左侧带弧度的受光面，before来做左下的拐角底面，具体情况如图：

　　after用-moz-transform:skew(0deg,-20deg);实现纵向斜切，before设定左下角为圆角，调整位置衔接起来就是一个拐角，因为斜切是一个直线，不过幅度小，所以不容易发觉，再设置after颜色为从左向右的线性渐变由浅到深，before为一个纯深色，同时border与主体衔接，这样基本的效果就出来了。
　　4、高光阴影
　　实现标题项基本元素后，就开始着手“不会变化”的高光、阴影、斜线了，这里的不会变化意思就是不会变化，很废哈…其实是不用变化，就是在你变化标题项底色的时候，这一块是不用改变的，我给提取出来用实现，我比较喜欢用标签来挂钩，你也可以替换成其它标签，这个无大碍。highlight主体拉一个由上到下，透明至0.2不透明的线性渐变，代码如下：