当前位置: 首页 > Web前端 > CSS

学习CSS3的新特性

时间:2023-03-30 23:06:35 CSS

介绍最近发现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*/}待续。.