/* 过渡动画 */
div {
transition: all 0.5s ease; /* 选择所有属性、动画时间、缓动函数 */
}
div:hover {
transform: translateX(50px); /* 鼠标悬停时偏移50像素 */
}
/* 边框 */
div {
border-radius: 10px; /* 圆角10像素 */
border: 1px solid #ccc; /* 边框样式、颜色 */
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* 盒子阴影效果 */
}
/* 渐变 */
div {
background: linear-gradient(to bottom right, #f00, #00f); /* 从左上到右下的渐变色 */
}
/* 媒体查询 */
@media screen and (max-width: 768px) {
/* 屏幕宽度小于等于768像素时的样式 */
div {
font-size: 14px;
}
}CSS3带来了众多新的特性和功能，例如过渡动画、边框、渐变、媒体查询等。这些特性可以让开发者更加轻松、高效地实现各种样式设计，提升页面的用户体验。通过CSS3的特性可以实现的动画等效果，让页面看起来更加美观。
总的来说，CSS3是一种非常强大的样式表语言，拥有许多新的特性和功能，并且可以有效地提升页面的用户体验。掌握和应用CSS3的技巧，可以让前端开发者在工作中更加高效和优秀。