介绍最近发现CSS3的很多新特性都不熟悉，所以今天就全部学习了，并做了效果加深印象。说到CSS3，增加了不少特性，比如一些边框效果，Animation属性动画trasiform等。1.Border-radius（边框圆角）效果 实现代码：height:100px；宽度：100px；保证金：0自动；背景色：#E0e0e0；border-radius:10px加上下面两个是为了兼容老版本的chrome和fixfox-moz-border-radius:10px;/*chrome*/-webkit-border-radius:10px;/*fixfox*/这个属性是很有意思，也可以用来画圆，设置值为百分比，可以画出任意大小的圆border-radius:50%;-moz-border-radius:50%;/*chrome*/-webkit-border-radius:50%;/*fixfox*/ 圆形效果2.box-shadow(边框阴影)这个厉害了，可以做出立体的效果，还可以让边框变得很酷 语法：box-shadow:h-shadowv-shadowblurspreadcolorinset;h-shadow:水平阴影位置v-shadow:垂直阴影位置blur:blurdistancespread:阴影大小color:阴影颜色inset:内阴影默认开始 效果 codebox-shadow:10px10px4px#A5A5A5;代码中使用了box-shadowoninput:008px2px#9668db;3.text-overflow(textoverflowhidden)设置div的宽高固定，当文字过多时，会超出div的边界。我们要实现如下效果，用三个点替换省略的文字代码text-overflow:ellipsis;溢出：隐藏；空白：nowrap; 4.transform(animation)鼠标移入时的动画：style.di{width:100px;高度：100px；边距：100px自动；背景色：#E0e0e0；过渡：宽度1s，高度1s；-moz-transition:宽度1s,高度1s,-moz-transform1s;/*可以支持Firefox4*/-webkit-transition:width1s,height1s,-webkit-transform1s;/*可以支持Safari和Chrome*/-o-transition:width1s,height1s,-o-transform1s;/*可以支持Opera*/}当鼠标移入时.di:hover{width:200px;高度：200px；变换：旋转（180度）；/*旋转180度*/-moz-transform:rotate(180deg);/*可以支持Firefox4*/-webkit-transform:rotate(180deg);/*可以支持Safari和Chrome*/-o-transform:rotate(180deg);/*可以支持Opera*/}待续。.
