CSS3 新特性

CSS3 新特性

新特性概览

新特性 说明
新的选择器
阴影 Box 阴影、文本阴影
圆角
渐变
透明度
Transitions
Transformations 旋转、缩放、扭曲、平移等
动画
多列布局
Flexbox 构建 Flex 布局
Grids 构建二维布局
@font face 嵌入更多字体
@media 响应式设计

阴影:box-shadow

圆角:border-radius

.class {
	border-radius: 20px;
}

渐变

透明度

.img {
	opacity: 0.8
}

渐变:Transitions

Transitions: 元素的某个属性发生渐变。

.class {
	triansition-duration: 1s
	transition-delay: 500ms
	transition-property: color
	transition-timing-function: ease-out
}

示例,鼠标移动到 btn2 按钮上的时候,1秒之内按钮颜色渐变为红色:

.btn2{ transition-duration:1s}
.btn2:hover{ background:red}

参考