css3 - 新增样式

1，CSS3 模块

css3 被拆分为 “模块”，旧规范已拆分成小块，还增加了新的

一些最重要的 CSS3 模块如下：

• 选择器
• 盒模型
• 背景和边框
• 文字特效
• 2D/3D 转换
• 动画
• 多列布局
• 用户界面

2，CSS3 的重要属性

2.1 CSS3 边框

• border-radius： 圆角
• box-shadow： 盒阴影
• border-image： 边界图片

2.2 CSS3 背景

• background-image： 背景图片，用逗号分隔多个图片

#example {
    background-img: url('./img1.png'), urll('./img2.png');
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat
}

#example {
    background: url('./img1.png') right bottom no-repeat, urll('./img2.png') left top repeat;
}

• background-size： 指定背景图片的大小，可以指定像素或百分比
• background-origin： 指定了背景图的位置区域，有三个属性【border-box、padding-box、content-box】
• background-clip：从指定位置裁剪背景图，【padding-box、content-box】

2.3 渐变

• 线性渐变：linear-gradient
• 径向渐变：radial-gradient

2.4 阴影

• text-shadow：文字阴影
• box-shadow：盒子阴影

2.5 文本溢出

white-space: nowrap;
text-overflew: ellipsis;
overflow: hidden

2.6 CSS3 字体

<style>
@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff)
}
div {
    font-family: myFirstFont
}
</style>

2.7 CSS3 2D 转换

• transform: translate(50px, 100px)：元素向右移动 50px，向下移动 100px
• transform: rotate(30deg)：顺时针旋转 30 度
• transform: scale(2, 3)：缩放，宽度变为原来的 2 倍，高度变为原来的 3 倍
• transform: skew(30deg, 20deg)