CSS3样式

  1.文字阴影

　　text-shadow            文字阴影

　　参数1：            X轴的偏移量

　　参数2：            Y轴的偏移量

　　参数3：            阴影的大小

　　参数4：            阴影的颜色

　　给负值为反方向，阴影可以叠加,不建议用叠加

1. div{
2. font: 100px/200px "微软雅黑";
3. text-align: center;
4. text-shadow: 5px 5px 10px red,-5px -5px 10px green;
5. }
7. <div>kaivon</div>

2.文字描边

     -webkit-text-stroke        文字描边     （只适用于webkit内核的浏览器）

                参数1：        描边的大小

                参数2：        颜色  

1. div{
2. font: 100px/200px "微软雅黑";
3. text-align: center;
4. color: #000;
5. -webkit-text-stroke: 3px red;
6. }
8. <div>kaivon</div>

 

3.盒模型阴影

                     box-shadow            盒模型阴影

                参数1：              阴影的方向

                                          inset        内阴影

                                          省略的话是外阴影

                参数2：            X轴的偏移量

                参数3：            Y轴的偏移量

                参数4：            阴影的扩展半径（先扩展再模糊，可先参数）

                参数5：            阴影的大小

                参数6：            阴影的颜色

 

                盒模型的阴影也可以叠加

1. div{
2. 300px;
3. height: 300px;
4. margin: 100px auto;
5. background: red;
6. box-shadow: inset 10px 10px 20px 10px green;
7. }
9. <div></div>

4.圆角  border-radius:

            border-radius            圆角

                一个值（20）            四个角都是20，一样大

                两个值（20 40）        上下（20）、左右（40）各一样

                三个值（20 40 60）    上（20）、右左（40）、下（60）

                四个值（10 20 30 40）    上（10）、右（20）、下（30）、左（40）

1. div{
2. 200px;
3. height: 200px;
4. margin: 100px auto;
5. border: 10px solid #000;
6. border-radius: 10px 20px 30px 40px;
7. /*border-radius: 50%;(矩形是正方形就变成圆形,不是正方形就变成椭圆)*/
8. }
10. <div></div>