[分享]css3手册下

CSS3手册是前端开发者必备的工具之一，它通常包含了CSS3的所有特性，并且详细地介绍了它们的应用和用法，使得开发者更加高效地进行页面设计和样式控制。 其中，常用的CSS3特性有很多，比如选择器、盒模...

CSS3手册是前端开发者必备的工具之一，它通常包含了CSS3的所有特性，并且详细地介绍了它们的应用和用法，使得开发者更加高效地进行页面设计和样式控制。
其中，常用的CSS3特性有很多，比如选择器、盒模型、浮动、定位、动画、过渡等等，下面就来简单介绍一下其中几个特性。
首先，选择器是CSS中最重要的部分之一，通过它们可以选择需要样式控制的元素。常用的选择器包括ID选择器、类选择器、属性选择器等等，其中ID选择器可以通过相应的id属性来选择元素，类选择器可以通过class属性来选择元素，而属性选择器则可以通过元素的属性值来选择元素。
除此之外，CSS3中还有一些新增的选择器，比如nth-child、nth-of-type、:not等等。如下所示：

/* 选择偶数个p元素 */
p:nth-child(even) {
  background-color: #CCC;
}
<br>
/* 选择第一个span元素 */
span:first-of-type {
  font-size: 14px;
}
<br>
/* 选择非button元素 */
*:not(button) {
  color: red;
} 

其次，盒模型也是CSS3中非常重要的一部分，通过它可以计算元素的边框、内边距和外边距等等。CSS3中的盒模型可以通过box-sizing属性进行控制，其中border-box值表示元素的边框和内边距会被包含在元素的总宽度和高度中，而content-box值则表示元素的总宽度和高度仅包含元素的内容部分。

/* 设置盒模型为border-box */
div {
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 5px solid black;
}
<br>
/* 盒模型为border-box时的计算方式 */
/* 宽度：200 */
/* 高度：200 */
/* 边框：10 */
/* 内边距：10 */
/* 总宽度：200 */
/* 总高度：200 */ 

最后，动画和过渡是CSS3中比较常用的属性之一，通过它们可以为元素添加各种效果，比如渐变、旋转、缩放、移动等等。其中，过渡可以通过transition来实现，而动画则可以通过@keyframes和animation属性进行控制。

/* 过渡设置 */
p {
  transition: all 1s ease-in-out;
}
<br>
/* 鼠标悬停时的效果 */
p:hover {
  font-size: 20px;
  color: red;
}
<br>
/* 动画设置 */
@keyframes my-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
<br>
div {
  animation: my-animation 2s ease-in-out infinite;
} 

CSS3手册是前端开发者非常重要的参考工具，通过它们可以快速地了解CSS3的各种特性和用法，从而更加高效地进行页面设计和开发。