- 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上面才能实现的效果。好牛逼的说。
时间： 2024-12-30 13:33:28