css3新增的属性面试

CSS3是在CSS2基础上新增了很多非常实用的属性，让我们的网页设计更具创意和个性化，下面将介绍一些在面试中经常被问到的CSS3新增的属性。

/* 1. border-radius: 圆角边框 */div {
    border-radius: 10px;
 /* 给div元素设置一个10px的圆角 */}
/* 2. box-shadow: 盒子阴影 */div {
    box-shadow: 2px 2px 2px 2px #888888;
 /* 在div元素周围添加一个阴影，阴影的颜色为#888888，阴影的偏移量分别为2px 2px，阴影半径为2px */}
/* 3. text-shadow: 文本阴影 */h1 {
    text-shadow: 2px 2px 2px #888888;
 /* 在h1标签的文本周围添加一个阴影，阴影的颜色为#888888，阴影的偏移量分别为2px 2px，阴影半径为2px */}
/* 4. opacity: 透明度 */div {
    opacity: 0.5;
 /* 将div元素的透明度设置为50% */}
/* 5. transition: 过渡效果 */button {
    transition: all 1s ease;
 /* 当鼠标放在button标签上时，让button标签的所有属性在1秒内过渡完成，并且过渡效果为ease */}
/* 6. transform: 变形 */div {
    transform: rotate(45deg);
 /* 将div元素旋转45度 */}
/* 7. @keyframes: 关键帧动画 */@keyframes my-animation {
from {
    transform: translateX(0px);
}
to {
    transform: translateX(100px);
}
}
div {
    animation: my-animation 1s infinite alternate;
 /* 让div元素执行my-animation动画，动画时间为1秒，动画次数为无限次，动画来回交替执行 */}
    

这些属性都是CSS3新增的，不仅使我们的网页设计更具有吸引力和个性化，同时也是面试中常被考察的知识点，希望大家都能熟练掌握，并灵活运用在项目中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！