CSS3 简介
CSS3 是 CSS 技术的升级版本，引入了许多新的特性。
什么是 CSS3
CSS3 是 CSS 技术的最新版本，增加了许多强大的新特性，包括圆角、阴影、渐变、动画、过渡、Flex 布局、Grid 布局等。CSS3 仍然完全向后兼容，旧的 CSS 规则在 CSS3 中仍然有效。
CSS3 新增模块
CSS3 被拆分为多个模块，主要包括：选择器、盒模型、背景和边框、文字特效、多栏布局、用户界面、动画、3D 转换等。
CSS3 边框
CSS3 新增的边框样式。
圆角边框
使用 border-radius 属性创建圆角边框。
div {
border-radius: 10px;
/* 也可以分别设置四个角 */
border-radius: 5px 10px 15px 20px;
}边框阴影
使用 box-shadow 属性为边框添加阴影。
div {
box-shadow: 10px 10px 5px #888888;
/* 还可以添加多个阴影 */
box-shadow: 5px 5px blue, 10px 10px red;
}边框图片
使用 border-image 属性使用图像作为边框。
div {
border-image: url(border.png) 30 round;
}CSS3 背景
增强的背景功能。
多重背景
CSS3 允许为一个元素设置多个背景图像。
body {
background-image: url(img1.png), url(img2.png);
background-position: left top, right bottom;
}背景尺寸
使用 background-size 属性调整背景图像尺寸。
div {
background-size: 100px 100px;
/* cover 等比例缩放 */
background-size: cover;
}CSS3 渐变
使用 CSS 创建渐变效果。
线性渐变
使用 linear-gradient 创建线性渐变。
div {
background: linear-gradient(to right, red, blue);
/* 还可以指定角度 */
background: linear-gradient(45deg, red, blue);
}径向渐变
使用 radial-gradient 创建径向渐变。
div {
background: radial-gradient(circle, red, blue);
}CSS3 文本效果
新增的文本样式效果。
文本阴影
使用 text-shadow 属性添加文本阴影。
h1 {
text-shadow: 2px 2px 5px #666666;
}文本换行
使用 word-wrap 和 word-break 控制文本换行。
p {
word-wrap: break-word;
word-break: break-all;
}CSS3 字体
使用自定义字体。
@font-face
使用 @font-face 规则引入自定义字体。
@font-face {
font-family: myFont;
src: url("myfont.woff2");
}
body {
font-family: myFont;
}CSS3 2D 转换
元素进行 2D 变换。
transform 属性
使用 transform 属性对元素进行旋转、缩放、倾斜、移动等变换。
div {
/* 旋转 */
transform: rotate(45deg);
/* 缩放 */
transform: scale(1.5);
/* 移动 */
transform: translate(50px, 100px);
/* 倾斜 */
transform: skew(30deg, 20deg);
}CSS3 3D 转换
元素进行 3D 变换。
3D 变换方法
CSS3 支持 3D 变换，包括 rotateX、rotateY、rotateZ 等。
div {
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);
}3D 透视
使用 perspective 属性设置 3D 透视效果。
div {
perspective: 500px;
}CSS3 过渡
创建平滑的过渡效果。
transition 属性
使用 transition 属性在属性变化时添加过渡效果。
div {
transition: width 2s, height 2s;
}
div:hover {
width: 300px;
height: 300px;
}CSS3 动画
创建复杂的动画效果。
@keyframes
使用 @keyframes 规则定义动画关键帧。
@keyframes myAnimation {
0% { background: red; }
50% { background: blue; }
100% { background: green; }
}
div {
animation: myAnimation 5s;
}CSS3 多列
创建多列布局。
多列属性
使用 column-count、column-gap、column-rule 等属性创建多列布局。
div {
column-count: 3;
column-gap: 20px;
column-rule: 3px solid red;
}CSS3 用户界面
新增的用户界面样式。
resize
使用 resize 属性允许用户调整元素尺寸。
div {
resize: both;
overflow: auto;
}box-sizing
使用 box-sizing 属性改变盒模型的计算方式。
div {
box-sizing: border-box;
width: 50%;
padding: 10px;
}