[分享]css3改变div宽度

CSS3是最新的CSS版本，它为我们提供了更多的选择和灵活性。我们可以使用CSS3来改变div的宽度，让它在网页中更加和谐美观。/ CSS代码 / div{ width: 200px; / 设置DIV...

CSS3是最新的CSS版本，它为我们提供了更多的选择和灵活性。我们可以使用CSS3来改变div的宽度，让它在网页中更加和谐美观。

/* CSS代码 */
div{
  width: 200px; /* 设置DIV的宽度为200px */
}
div:hover{
  width: 300px; /* 当鼠标悬浮在DIV上时，将其宽度改为300px */
} 

在上述代码中，我们首先设置了div的初始宽度为200px。然后，在鼠标悬浮到div上时，使用:hover伪类设定了一个新的宽度——300px。也就是说，当用户把鼠标指向div时，其宽度将在瞬间从200px增加到300px。

CSS3提供给我们很多方式来改变div的宽度，例如使用transition过渡效果、使用animation动画效果等。我们可以根据需求和设计风格选择不同的方法，提高网页的用户体验。