#|CSS3新特性 css3|css|前端|CSS

CSS3新特性

1.CSS3的现状
2. CSS3新增选择器
- 2.1 属性选择器
- 2.2 结构伪类选择器
- 2.3 伪元素选择器
- 2.4 伪元素使用小案例
- 2.5 伪元素清除浮动原理
- 2.6 CSS3 盒子模型
- 2.7 CSS3其他特性
- - 2.7.1 filter()函数---图片模糊
  - 2.7.2 calc()计算函数
- 2.8 过渡
- - 2.8.1 过渡练习-进度条
3. 狭义的HTML5 和CSS3
4. 广义的HTML5 和CSS3

1.CSS3的现状 2. CSS3新增选择器

文章图片

文章图片

2.1 属性选择器

文章图片

注意：div[class=“icon”] 其权重为11，他由标签选择器div和属性选择器[class=“icon”] 组成

2.2 结构伪类选择器

文章图片

文章图片

【#|CSS3新特性】解释：-n+5，因为n是从0开始，0，1，2，3…, -n就是0，-1，-2，-3…,再加5就是5，4，3，2，1，0，就是取前五个

文章图片

2.3 伪元素选择器

文章图片

使用div::before 会在div内部最前面创建一个行内元素，div::after会在div内部的最后面创建一个行内元素

文章图片

文章图片

2.4 伪元素使用小案例

文章图片

Document - 锐客网 > @font-face { font-family: 'iconfont'; src: url('font/iconfont.ttf?t=1656768109335') format('truetype'); } div { position: relative; width: 200px; height: 50px; border: 1px solid red; }div::after { position: absolute; top: 10px; right: 10px; font-family: "iconfont" !important; content: '\e6cd'; }

2.5 伪元素清除浮动原理

文章图片

文章图片

2.6 CSS3 盒子模型

文章图片

2.7 CSS3其他特性 2.7.1 filter()函数—图片模糊

文章图片

文章图片

2.7.2 calc()计算函数

文章图片

2.8 过渡

文章图片

CSS3过渡效果 - 锐客网 > div { width: 200px; height: 100px; background-color: pink; /* transition: 要变化的属性花费的时间运动曲线何时开始 */ transition: width 1s ease 0.5s; } div:hover { width: 400px; }

效果如下：

文章图片

文章图片

2.8.1 过渡练习-进度条

文章图片

CSS过渡练习-进度条 - 锐客网 > .bar { width: 200px; height: 20px; border: 2px solid black; border-radius: 10px; margin: 0 auto; } .bar-in { width: 0px; height: 20px; background-color: red; border-radius: 10px; transition: width 3s; } .bar:hover .bar-in { width: 100%; }

3. 狭义的HTML5 和CSS3