css3 圆角，阴影，渐变...

一、边框圆角border

border-radius:10px 0px 0px 0px; //先从左上角开始
border-radius:30px;//也可只写一个

二、阴影

　1.盒子的阴影 box-shadow

　　box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
　　X轴偏移量 Y轴偏移量 是必填项
　　阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越糊；
　　阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
　　box-shadow: 0px 0px 0px 10px;阴影默认黑色，外阴影(outset); 
　　注：内阴影inset除放在第一和最后位置，其他中间位置是无效的

 　.box div{background-color:#FFF;border:1px solid #ccc;}
   .box1{box-shadow:0px 0px 0px 10px;}
   .box2{box-shadow:0px 0px 10px 5px #059;}
   .box3{box-shadow:4px 3px 4px 0px #005599 ;}
   .box4{box-shadow:0px 0px 10px 0px #0f0 inset;}

 2.文字阴影 text-shadow　

text-shadow:水平偏移 垂直偏移 模糊距离(不能为负数) 阴影颜色;<br />
text-shadow:3px 3px 2px #333;<br />
可以写多组：text-shadow:0 0 3px #789234,0 0 3px #00ff99,0 0 3px #7ff09e;

.box div{background-color:#fff;border:1px solid #ccc;188px;font-size:30px;font-weight:900;}
.box1{color:#fff;text-shadow:0 0 5px #99FFFF,0 0 15px #99FFFF,0 0 25px #99FFFF; }
.box2{text-shadow:0 0 5px #30C;color:transparent; }
.box3{text-shadow:-1px -1px 0 #fff, 1px 1px 0 #000;}
.box4{color:#fff;text-shadow:1px 0px 0 #60F,0px 1px 0 #60F,-1px 0px 0 #60F,0px -1px 0 #60F;}
.box5{color:#fff;text-shadow:0px 1px 0 #000,0px 2px 0 #333,0px 3px 0 #060606,0px 4px 0 #020202,0px 5px 0 #252525,0px 6px 1px rgba(0,0,0,0.5),0px 5px 4px rgba(0,0,0,0.7),0px 2px 6px rgba(0,0,0,0.6);}
.box6{text-shadow:3px 3px 0px #00BBFF;}

三、渐变

线性渐变：linear-gradient(方向,颜色1,颜色2...);  语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

linear-gradient(to left,red,orange,yellow,green,blue,indigo,violet);

线性渐变的方向：除了 to left;to right;to top;to bottom;to top left(从右下角到左上角);to top right;
还可以用具体的角度：90deg (想当于 to right) ,0deg相当于to top; 默认方向是从上到下。

.box1{background:linear-gradient(to right,#69e7e6,#0a4670);}
.box2{background:linear-gradient(45deg,#69e7e6,#0a4670);}
.box3{background:linear-gradient(to right,red ,yellow ,blue);}

 

径向渐变：
可加属性：circle(圆形)、颜色开始位置百分比、起始位置如：bottom left、圆心位置百分比
径向渐变：radial-gradient(颜色1 百分比1,颜色2 百分比2,颜色3 百分比3);百分比是开始位置,不加则颜色均匀间隔
语法：background: radial-gradient(center, shape, size, start-color, ..., last-color);
center：渐变起点的位置，可以为百分比，也可以用left top等组合，默认是图形的正中心。
shape: 渐变的形状，ellipse便是椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size： 渐变的大小，即渐变到哪里停止，它有四个值。closet-side: 最近边；farthest-side：最远边； closet-corner：最近角； farthest-corner：最远角(默认)
//size 属性要加上-webkit- 等前缀，否则不起作用

          //chrome下 
　　　　　　 .example5 .box1{background:radial-gradient(red,yellow,blue);} //没有设置位置，颜色均匀分布
            .example5 .box2{background:radial-gradient(red,yellow 20%,blue 60%);} //color sotp ,百分比表示颜色开始位置 ；若外层颜色位置比内层颜色位置小，则会覆盖
            .example5 .box3{background:radial-gradient(30% 30%,red,yellow 20%,blue 60%);} //不加 -webkit-，百分比表示渐变的宽高大小
            .example5 .box4{background:-webkit-radial-gradient(30% 30%,red,yellow 20%,blue 60%);}//加-webkit- 百分比表示中心位置