CSS3的一些应用实例

css3实现多边框效果

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>css3应用</title>
 6     <link rel="stylesheet" href="style.css"/>
 7 </head>
 8 <body>
 9     <div class="div1"></div>
10 </body>
11 </html>

 1 div{
 2     width: 200px;
 3     height: 200px;
 4     background-color: yellow;
 5     margin: 100px auto;
 6 }
 7 .div1{
 8     box-shadow: 0 0 0 6px red,
 9     0 0 0 12px green,
10     0 0 0 18px blue;
11 }
12     /*当X,Y和 “模糊程度” 的值都为0是就可以实现边框效果，这时如果再添加几组数据而且分别改变投影的值的大小，就可以得到多边框效果*/

效果图可以考代码在自己浏览器看：

css3内阴影

1 .div1{
2     box-shadow: 0 0 0 6px red,
3     0 0 0 12px green,
4     0 0 0 18px blue,
5     inset 0 0 10px #000,
6     inset 0 0 60px blue,
7     inset 0 0 80px red;
8 }/*在刚刚的基础上加上内阴影，惊奇发现阴影颜色竟然发生混合，有很大的想象空间*/

css3投影偏移：

1 .div1{
2     box-shadow: 0 0 0 6px red,
3     0 0 0 12px green,
4     0 0 0 18px blue,
5     inset 0 0 10px #000,
6     inset 0 0 60px blue,
7     inset 0 0 80px red,
8     236px 0 0 2px #709b1e;/*再多加一组阴影，并且让其在X方向上偏移*/
9 }

综上，CSS3，可以实现以前在PS上面才能实现的效果。好牛逼的说。