CSS3是CSS的最新版本,引入了许多新的特性和语法,让我们更方便地设计网页的外观和交互效果。
/* 圆角边框 */
.box {
border-radius: 10px;
}
/* 阴影 */
.box {
box-shadow: 5px 5px 10px #999;
}
/* 渐变背景 */
.box {
background: linear-gradient(#000, #fff);
}
/* 动画效果 */
.box {
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
} 以上代码分别演示了圆角边框、阴影、渐变背景和动画效果这四个CSS3的新特性。它们分别用到了border-radius、box-shadow、background、animation和@keyframes这几个新的语法。
除了这些,CSS3还引入了更多的新特性,如过渡效果、弹性布局、媒体查询等,这些都让我们在网页设计中拥有更多的选择和控制。