[前端开发] CSS基础知识 [下]

上篇:CSS 基础知识 [上]
CSS基础知识 [下]
- - CSS 新特性
  - 媒体查询
  - 雪碧图
  - 字体图标

CSS 新特性

圆角 (border-radius)
- 通过 border-radius 属性为元素添加圆角。
- 类型:
  - border-radius: a b c d: 四个值分别为左上|右上|右下|左下角
  - border-radius: a b c : 三个值分别为左上|右上和左下|右下
  - border-radius: a b : 两个值分别为左上和右下|右上和左下
  - border-radius: a : 一个值代表四个角
阴影 (box-shadow)
- 通过 box-shadow 属性为元素添加阴影效果。
  - box-shadow: h-shadow v-shadow blur color
  - h-shadow: 必填, 水平阴影的位置(负值就往左边, 正值往右边)
  - v-shadow: 必填, 垂直阴影的位置(负值就往上边, 正值往下边)
  - blur: 可选, 模糊距离
  - color: 可选, 阴影颜色
动画 (animation)
- 使用 @keyframes 创建动画，然后通过 animation 属性将动画应用到元素上。
- 使元素从一种样式逐渐变化为另一种样式的效果
  - 用 from 或 0% 表示动画开始
  - 用 to 或 100% 表示动画完成
- @keyframes 创建动画
```
css">@keyframes name{
from|0%{
css样式
}
percent{
css样式
}
to|100%{
css样式
}
}
```
  - name: 动画的名称
  - percent: 百分比, 可以添加多个百分比值
- animation 执行动画
  - animation: name duration timing-function delay iteration-count direction;
  - name: 设置动画名称
  - duration: 设置动画持续时间
  - 注意要加上单位秒(s)
  - timing-function: ease|linear|ease-in|ease-out|ease-in-out|
- 设置动画效果的速率
  - ease:逐渐变慢(默认)
  - linear: 匀速
  - ease-in: 加速
  - ease-out: 减速
  - ease-in-out: 先加速后减速
- delay: 设置动画开始时间(延时)
  - 注意要加上单位秒(s)
  - iteration-count: 设置动画循环次数(infinite为无限循环)
  - direction: normal|alternate
- 设置动画播放方向
  - normal: 正向(默认)
  - alternate: 在第偶数次向前播放, 第奇数次向反方向播放
- animation-play-state: 控制动画播放状态(running为播放, paused为停止)

媒体查询

设置 meta 标签
- 在 HTML 文件的头部添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 设置视口参数，以确保在不同设备上显示良好。
媒体查询语法
- 使用 @media 查询不同设备大小，并根据条件加载相应的 CSS 样式，以实现响应式布局。

雪碧图

雪碧图是一种将多个小图片合并成一张大图的技术，通过减少页面的 http 请求来提高页面加载速度。
优点
- 减少图片的字节
- 减少页面的http请求,从而大大提高页面的性能
原理
- 通过 background-image 引入背景图片
- 通过 background-position 把背景图片移动到自己需要的位置

字体图标

常用字体图标库: 阿里字体图标库 https://www.iconfont.cn/
使用方式
- 注册登录
- 选择图标
- 添加购物车
- 下载代码(也可以添加到项目,然后下载压缩包)
- 将下载的文件放在网页代码文件所在的目录下
- 选择 font-class 引用(可以打开下载的文件里的.html文件查看使用方式)