[分享]css3效果ss3新特性

CSS3是指css的第三个版本，它是一种用于美化HTML页面的语言。相对于之前的版本，CSS3增加了许多新特性和效果。下面我们来具体了解一下CSS3的新特性和效果。1. 渐变（Gradient）渐变是...

CSS3是指css的第三个版本，它是一种用于美化HTML页面的语言。相对于之前的版本，CSS3增加了许多新特性和效果。下面我们来具体了解一下CSS3的新特性和效果。

1. 渐变（Gradient）
渐变是CSS3中最为常用的新特性之一。我们可以通过css3渐变实现页面背景、字体颜色等的渐变效果。

background: -webkit-linear-gradient(left,top,right,bottom,from,to);
background: -moz-linear-gradient(left,top,right,bottom,from,to);
background: -ms-linear-gradient(left,top,right,bottom,from,to);
background: -o-linear-gradient(left,top,right,bottom,from,to);
background: linear-gradient(left,top,right,bottom,from,to); 

2. 圆角（Border-radius）
CSS3的圆角效果可以通过border-radius属性实现，我们只需要设置该属性的值为圆角的半径即可。

border-radius: 10px; 

3. 阴影（Box-shadow）
使用CSS3的box-shadow属性可以为页面元素添加阴影效果，可以为元素添加内阴影和外阴影。

box-shadow: 3px 3px 10px #ccc;//水平偏移3px,垂直偏移3px,模糊半径10px,颜色#ccc 

4. 透明度（Opacity）
使用CSS3的opacity属性可以为页面元素设置透明度，无需添加额外的div元素来实现半透明效果。

opacity: 0.5; 

5. 过渡效果（Transition）
CSS3的Transition属性可以实现元素状态的平滑过渡效果，比如当鼠标移到一个链接上时，链接的颜色或者背景颜色会以渐变的方式改变。

transition: all 1s ease;//all表示所有属性都会实现过渡效果,1s表示时间,单位秒，ease表示过渡效果evase-in-out 

6. 动画（Animation）
使用CSS3的animation属性可以为元素设置动画效果，比如页面中的旋转、闪烁等动态效果。

animation: rotate 2s linear infinite;//动画名称为rotate,2s表示时间,无线循环
@keyframes rotate{
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
} 

总结：
CSS3的新特性和效果丰富多彩，让我们在页面美化和交互设计中获得了更多的自由度和创造性，同时也更加方便了前端开发。