1.边框
使用css,可以创建新的圆角边框(border-radius),添加阴影框(box-shadow),图片作为边框(border-image)
2.背景属性
background-image、background-size、background-clip、background-position等
3.渐变属性
linear-gradient :
#grad {
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* 标准的语法 */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
也支持渐变透明度,颜色用rgba设置
也支持监督渐变
4.新的文本效果
text-shadow、box-shadow、text-overflow、word-wrap、word-break
5.字体
@font-face
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
6. 2D/3D转换
transform、transform-origin
方法:translate、rotate、scale、skew、matrix
7.过渡效果
transition: 过渡属性名、过渡时间、时间曲线、延迟时间
8.动画
@keyframe + animation
9.弹性布局(flex box)
10.用户界面
resize
box-sizing
outline-offset
11.媒体查询
@media 媒体类型 and (条件) {
}
// 例子
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}