CSS3 圆角 阴影 渐变


CSS3 圆角 阴影 渐变  COME


前缀

-moz(例如 -moz-border-radius)用于Firefox。

-webkit(例如:-webkit-border-radius)用于Safari和Chrome。


css3圆角

代码:

.radius {

width:300px;

height:50px;

border: 5px solid #ff0;

border-radius:15px;            /* W3C syntax */

-moz-border-radius: 15px;      /* Gecko browsers */

-webkit-border-radius: 15px;  /* Webkit browsers */

}

效果:


其他写法:

border-radius:5px 15px 20px 25px;  // 上 右 下 左

css3盒子阴影:

语法:

外阴影:box-shadow:X Y Npx #color;

内阴影:box-shadow:inset X Y Npx #color;

文字阴影:text-shadow:X Y Npx #color;

第一个属性:阴影的X轴(可以使用负值)

第二个属性:阴影的Y轴(可以使用负值)

第三个属性:阴影的像素(大小)

第四个属性:阴影的颜色

inset是设置内阴影

代码:

.shadow{

width:300px;

height:50px;

box-shadow:0px 0px 8px #f00;

}

效果:


同一盒子,可以同时加多个阴影,阴影之间用“,”隔开。

代码:

.shadow{

width: 100px;

height: 100px;

box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;

}

效果:


css3渐变

CSS3的渐变分为两种:

1)线性渐变(linear - to)

语法: linear-gradient([direction], color [percent], color [percent], …)([] 内为选填)

direction角度的单位为 “deg” 也可以用to bottom, to left, to top left等的方式来表达

2)径向渐变(radial - at)

语法:radial-gradient(shape at position, color [percent] , color, …)

shape:放射的形状,可以为原型circle,可以为椭圆ellipse

position: 圆心位置,可以两个值,也可以一个,如果为一个时,第二个值默认center 即50%。值类型可以为,百分数,距离像素,也可以是方位值(left,top...);

代码:

.gradient{

width:400px;

height:80px;

background: linear-gradient(top, #f00, #fff);

background: -webkit-linear-gradient(top, #f00, #fff);

background: -o-linear-gradient(top, #f00, #fff);

background: -ms-linear-gradient(top, #f00, #fff);

background: -moz-linear-gradient(top, #f00 0, #fff 100%);

}

效果:


BY---我是小公