css3公共样式【代码示例】

CSS3公共样式是指可以在多个元素中共享的样式，通过使用CSS3的选择器和属性，我们可以轻松地为多个元素应用相同的样式。下面是一些常见的CSS3公共样式及其示例代码。

1、圆角边框（border-radius）：可以使用border-radius属性为元素的边框添加圆角效果。例如，以下代码将一个div元素的四个角都设置为圆角效果：

div {
  border-radius: 10px;
}

2、阴影效果（box-shadow）：可以使用box-shadow属性为元素添加阴影效果。例如，以下代码将一个按钮元素的边框添加一个灰色的阴影效果：

button {
  box-shadow: 2px 2px 5px gray;
}

3、渐变背景（background-image）：可以使用background-image属性为元素设置渐变背景。例如，以下代码将一个div元素的背景设置为从红色渐变到蓝色的线性渐变背景：

div {
  background-image: linear-gradient(red, blue);
}

4、过渡效果（transition）：可以使用transition属性为元素添加过渡效果，使元素的样式在一段时间内平滑地过渡到新的样式。例如，以下代码将一个按钮元素的背景颜色在0.5秒内过渡到红色：

button {
  transition: background-color 0.5s;
}
button:hover {
  background-color: red;
}

5、动画效果（animation）：可以使用animation属性为元素添加动画效果。例如，以下代码将一个div元素的宽度从100px变化到200px，并在2秒内循环播放：

div {
  animation: widthChange 2s infinite;
}
@keyframes widthChange {
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

通过使用这些CSS3公共样式，我们可以轻松地为多个元素添加相同的样式效果，提高代码的可维护性和重用性。