CSS3作为CSS的升级版,引入了许多新的特性,以下是一些值得关注的知识点:
1. 新增选择器
CSS3新增了众多的选择器,常见的有:
/* 属性选择器 */ [attr=value] { ... } /* 子字符串选择器 */ [attr^=value] { ... } [attr$=value] { ... } [attr*=value] { ... } /* 伪类选择器 */ :target { ... } :not(selector) { ... } /* 伪元素选择器 */ ::before { ... } ::after { ... }
这个属性可以让我们更方便地设置盒子模型的宽高,常用的有两个值:
Box-sizing: content-Box; /* 默认值,指定的宽高不包含内边距和边框 */ Box-sizing: border-Box; /* 指定的宽高包含内边距和边框 */
3. CSS3动画
CSS3的动画相比JavaScript动画更易实现和维护,常用的属性和方法包括:
/* 设置动画的名称、时长、缓动函数、延迟时间等 */ animation: name duration timing-function delay; /* 定义一个动画的关键帧 */ @keyframes name { 0% { ... } 50% { ... } 100% { ... } }
4. 渐变效果
CSS3支持多种渐变效果,包括线性渐变、径向渐变、重复渐变等,用法如下:
/* 线性渐变 */ background: linear-gradient(direction,color-stop1,color-stop2,...); /* 径向渐变 */ background: radial-gradient(center,shape size,...); /* 重复渐变 */ background: repeating-linear-gradient(direction,...);
5. Flex布局
Flex布局是CSS3提供的一种新布局方式,可以轻松实现弹性布局,常用的属性包括:
/* 设置容器的方向 */ flex-direction: row/column; /* 设置容器内部的元素如何排列和分配空间 */ justify-content: center/flex-start/flex-end/space-between/space-around; align-items: center/flex-start/flex-end/baseline/strech;
总结
CSS3的新特性给前端开发带来了很多便利,以上介绍的知识点仅仅是冰山一角,大家可以深入学习更多的CSS3特性来提升自己的前端技能。