CSS3 在布局、背景、文本、边框、 word-wrap、透明度、动画等方面增加了很多新特性。
- 选择器:E:last-child 匹配父元素的最后一个子元素 E。
- 边框:border-radius 创建圆角。
- 背景:background-size 背景图片的尺寸。
- 文本效果:text-shadow 文本阴影。
- 字体:@font-face 在 CSS 中嵌入字体。
- 阴影:box-shadow 盒子阴影。
- 渐变:linear-gradient 线性渐变。
- 动画:animation 创建动画。
- 2D/3D转换:transform 应用2D和3D转换。
- 多列布局:column-count 列数。
- 用户界面:resize 控制元素的大小调整。
示例代码:
/* 圆角 */
div {
border-radius: 10px;
}
/* 阴影 */
div {
box-shadow: 10px 10px 5px #888888;
}
/* 渐变背景 */
div {
background: linear-gradient(to right, red , yellow);
}
/* 动画 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation-name: example;
animation-duration: 4s;
}
/* 多列布局 */
div {
column-count: 3;
}