十二、CSS3新特性
12.1圆角
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"
border-radius 属性，可以使用以下规则：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
<style> div{ margin: 10px; } .box1 { border-radius: 15px 50px 30px 5px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } .box2 { border-radius: 15px 50px 30px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } .box3 { border-radius: 15px 50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } </style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
12.2阴影
box-shadow 向框添加一个或多个阴影。
box-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
| h-shadow | 必选，水平阴影的位置 |
| v-shadow | 必选，垂直阴影的位置 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色 |
<style> .box { width: 200px; height: 200px; background-color: #8ac007; margin: 50px; box-shadow: 10px 10px green; } </style> <div class="box"></div>
给阴影添加一个模糊效果
<style> .box { width: 200px; height: 200px; background-color: #8ac007; margin: 50px; box-shadow: 10px 10px 5px green; } </style> <div class="box"></div>
三个方向的阴影效果
<style> .box { width: 200px; height: 200px; background-color: #8ac007; margin: 50px; box-shadow: 0 10px 30px rgba(0,0,0,.5); } </style> <div class="box"></div>
十三、动画
动画是使元素从一种样式逐渐变化为另一种样式的效果
您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%
0% 是动画的开始，100% 是动画的完成。
13.1@keyframes创建动画
使用@keyframes规则，你可以创建动画
@keyframes name { from|0%{ css样式 } percent{ css样式 } to|100%{ css样式 } }
name：动画名称，开发人员自己命名；
percent：为百分比值，可以添加多个百分比值
13.2animation执行动画
animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
| name | 设置动画的名称 |
| duration | 设置动画的持续时间 |
| timing-function | 设置动画效果的速率（如下） |
| delay | 设置动画的开始时间（延时执行） |
| iteration-count | 设置动画循环的次数，infinite为无限次数的循环 |
| direction | 设置动画播放的方向（如下） |
| animation-play-state | 控制动画的播放状态：running代表播放，而paused代表停止播放 |
| timing-function值 | 描述 |
| ease | 逐渐变慢（默认） |
| linear | 匀速 |
| ease-in | 加速 |
| ease-out | 减速 |
| ease-in-out | 先加速后减速 |
| direction值 | 描述 |
| normal | 默认值为normal表示向前播放 |
| alternate | 动画播放在第偶数次向前播放，第奇数次向反方向播放 |
13.3切换背景颜色
<style> .animation { width: 300px; height: 300px; background-color: red; animation: anima 5s linear 5s infinite; } .animation:hover { //鼠标悬停事件触发动画停止 animation-play-state: paused; } @keyframes anima { 0% { background-color: red; } 50% { background-color: green; } 100% { background-color: blueviolet; } } </style> <div class="animation"></div>
13.4呼吸效果
<style> .box { width: 500px; height: 400px; margin: 40px auto; background-color: #2b92d4; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); animation: breathe 2700ms ease-in-out infinite alternate; } @keyframes breathe { 0% { opacity: .2; box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) } 50% { opacity: .5; box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76) } 100% { opacity: 1; box-shadow: 0 1px 30px rgba(59, 255, 255, 1) } } </style> <div class="box"></div>
十四、媒体查询
媒体查询能使页面在不同在终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式
设置meta标签
使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
参数解释
width = device-width宽度等于当前设备的宽度initial-scale初始的缩放比例（默认设置为1.0）maximum-scale允许用户缩放到的最大比例（默认设置为1.0）user-scalable用户是否可以手动缩放（默认设置为no）
媒体查询语法
@media screen and (max-width: 768px) { /* 设备小于768px加载样式 */ body{ background-color: red; } } @media screen and (max-width: 992px) and (min-width: 768px) { /* 设备小于768px但小于992px加载样式 */ body{ background-color: pink; } } @media screen and (min-width: 992px) { /* 设备大于992px加载样式 */ body{ background-color: green; } }
十五、精灵图
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。
优点
- 减少图片的字节
- 减少网页的http请求，从而大大的提高页面的性能
原理
- 通过background-image引入背景图片
- 通过background-position把背景图片移动到自己需要的位置
十六、字体图标
我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题
常用字体图标库：阿里字体图标库
优点
- 轻量性：加载速度快，减少http请求
- 灵活性：可以利用CSS设置大小颜色等
- 兼容性：网页字体支持所有现代浏览器，包括IE低版本
使用字体图标
- 注册账号并登录
- 选取图标或搜索图标
- 添加购物车
- 下载代码
- 选择
font-class引用
<link rel="stylesheet" href="./css/iconfont.css"> .iconfont{ font-size: 35px; color: red; } <span class="iconfont icon-add-circle"></span>
