css3基础知识点

CSS3是CSS的升级版，具有更强的功能和更灵活的应用方式，成为前端开发中不可或缺的一部分。

CSS3包含了众多的新特性，下面将介绍几个基础的知识点。

/* 选择器 */
/* CSS3引入了新的选择器，包括属性选择器、伪元素等 */
p[data-level="1"] {
  color: red;
}
p:last-child {
  margin-bottom: 0;
}

/* 盒模型 */
/* CSS3中可以通过box-sizing属性改变盒模型计算方式 */
div {
  width: 200px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box;
}

/* 边框 */
/* CSS3中的边框设置更加多样化，包括圆角、阴影等 */
div {
  border-radius: 5px;
  box-shadow: 1px 1px 3px rgba(0,0.3);
}

/* 文本 */
/* CSS3中的文本样式更加灵活，包括字体、颜色、对齐等 */
p {
  font-size: 16px;
  color: #333;
  text-align: center;
}

/* 过渡 */
/* CSS3中引入了过渡效果，可以使元素在状态变化时产生过渡 */
button {
  transition: all 0.3s ease;
}
button:hover {
  background-color: #ccc;
  color: white;
}

CSS3的知识点不止以上几个，开发者应该对其进行全面的了解和学习，并灵活运用在项目中。