css3 前端面试题 |css 网站导航有哪些尺寸

1. 请简单介绍CSS3的新特性是什么？
CSS3新特性包括文本阴影、圆角、线性渐变、旋转和缩放、动画、过渡等，这些特性让页面元素更加灵活且多样化。

2. 如何实现圆角？

使用border-radius属性即可实现圆角，例如将一个盒子的四个角都变成圆角：

div {
border-radius: 10px;
}

3. 如何实现动画效果？

通过@keyframes关键字定义动画的关键帧，然后结合animation属性来将动画应用到具体的元素上。例如：

@keyframes example {
0% {opacity: 0;}
50% {opacity: 0.5;}
100% {opacity: 1;}
}
div {
animation: example 2s ease-in-out;
}

4. 如何实现响应式布局？

通过媒体查询（media query）实现响应式布局，媒体查询可以针对不同的屏幕尺寸设置不同的样式表，从而实现布局的变化。例如：

@media screen and (max-width: 640px) {
div {
width: 50%;
}
}
@media screen and (min-width: 641px) and (max-width: 960px) {
div {
width: 30%;
}
}
@media screen and (min-width: 961px) {
div {
width: 20%;
}
}

5. 如何实现平移效果？

使用transform属性实现平移效果。例如：

div {
transform: translate(50px, 50px);
}

CSS3的特性丰富多样，以上只是部分基础问题的解答，希望能够帮助到广大的前端开发者们。