css3中特性被拆分 |如何让css3 动画重复

第一个被拆分的特性是Border Image。这个特性是在CSS3的Backgrounds and Borders模块中定义的，用于为边框添加图片。但在CSS4中，这个特性被拆分成了一个单独的模块，即CSS Border Image Module。

/* CSS3代码 */
div {
border: 10px solid #000;
border-image: url(border.png) 30 repeat;
}
/* CSS4代码 */
div {
border: 10px solid #000;
border-image-source: url(border.png);
border-image-width: 30;
border-image-repeat: repeat;
}

第二个被拆分的特性是Flexbox。Flexbox是用于布局的一种规范，在CSS3中定义在Flexible Box Layout Module中。但最近，新的CSS规范CSS Box Alignment中独立出了Flexbox布局的一部分内容，即align-content、justify-content、align-items和justify-items等属性。

/* CSS3代码 */
.container {
display: flex;
align-items: center;
}
/* CSS4代码 */
.container {
display: flex;
}
.item {
align-self: center;
}

第三个被拆分的特性是CSS Grid。CSS Grid是一种用于网格布局的规范，在CSS3中定义在CSS Grid Layout模块中。而在CSS Grid Level 2规范中，这个特性被拆分成了几个不同的部分，包括Grid Template Columns、Grid Template Rows、Grid Template Areas等。

/* CSS3代码 */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/* CSS Grid Level 2代码 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

总之，CSS3中有一些特性被拆分成了独立的模块，这为大家的网页开发带来了更加灵活和精细的控制。开发者们需要不断学习和适应这些新的规范，以保持自己在网页开发领域的竞争力。