总结css的知识点和css3的新特性
CSS常见知识点：
盒子模型及其相关属性
盒子模型是CSS布局中的一个基础概念，由内容区域、内边距、边框和外边距组成。常用的盒子模型属性有width、height、padding、margin、border等。
示例代码：
css
.box {
width: 200px;
height: 200px;
padding: 10px;
margin: 20px;
border: 1px solid black;
}
浮动（float）及清除浮动方法
浮动可以将元素向左或向右移动，使得其他元素围绕其排列。在使用浮动时需要考虑清除浮动的问题。
示例代码：
css
.box {
float: left;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
定位（position）
定位是指通过CSS属性控制元素的位置，常用的定位属性有position、top、right、bottom、left等。
示例代码：
css
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
选择器
选择器是用来选择HTML元素的一种方式，包括标签选择器、ID选择器、类选择器、伪类和伪元素等。
示例代码：
css
/* 标签选择器 */
h1 {
color: red;
}
/* ID选择器 */
#box {
background-color: black;
}
/* 类选择器 */
.list {
font-size: 16px;
}
/* 伪类 */
a:hover {
text-decoration: underline;
}
/* 伪元素 */
p::after {
content: "- The End -";
font-style: italic;
}
文本样式
文本样式包括字体、颜色、大小、行高等。
示例代码：
css
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333333;
}
背景样式
背景样式包括背景颜色、背景图片、背景定位等。
示例代码：
css
body {
background-color: #f5f5f5;
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: center top;
}
渐变（linear-gradient和radial-gradient）
渐变可以创建自然的过渡效果，常用的渐变有线性渐变和径向渐变。
示例代码：
css
/* 线性渐变 */
body {
background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
}
/* 径向渐变 */
.box {
background: radial-gradient(circle at center, #ffffff 0%, #f5f5f5 100%);
}
动画（animation）、过渡（transition）和变形（transform）
动画、过渡和变形都是用来实现元素的动态效果，常用的属性有animation、transition、transform等。
示例代码：
css
/* 动画 */
.box {
animation: move 2s ease infinite;
}
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
/* 过渡 */
.box {
transition: all 0.3s ease-out;
}
.box:hover {
transform: scale(1.2);
}
边框半径（Border Radius）：可以使用 border-radius 属性来将元素的边角变为圆角。 示例代码：
div {
border-radius: 10px;
}
盒阴影（Box Shadow）：使用 box-shadow 属性可以为元素添加阴影效果。 示例代码：
div {
box-shadow: 5px 5px 5px #888888;
}
渐变（Gradient）：可以使用 linear-gradient 或 radial-gradient 实现渐变效果。 示例代码：
div {
background: linear-gradient(to right, red, yellow);
}
动画（Animation）：使用 animation 属性可以为元素添加动画效果。 示例代码：
div {
animation: example 5s infinite;
}
@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: blue;}
}
媒体查询（Media Queries）：可以根据屏幕大小、分辨率等参数来修改 CSS 样式，实现响应式网页设计。 示例代码：
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
未完待续-----------
CSS3的新特性：
边框圆角（border-radius）和阴影效果（box-shadow）。
多列布局（multi-column layout）。
盒子大小（box-sizing）控制。
变形（transform）功能，用来对元素进行旋转、倾斜、缩放、平移等操作。
过渡（transition）功能，用来实现动态交互效果。
动画（animation）功能，用来制作更加复杂的动画效果。
文本阴影（text-shadow）功能，用来给文本添加阴影效果。
媒体查询（media query）功能，用于响应式布局。
Web字体（@font-face）功能，可以在网页中使用自定义字体。
渐变（linear-gradient和radial-gradient）功能，用于创建更加自然的渐变效果。