圆角和阴影
-
圆角，使用
border-radius可以给任何元素制作圆角 -
阴影，
box-shadow向框添加一个或多个阴影：box-shadow: h-shadow v-shadow blur color -
h-shadow 水平阴影的位置
-
v-shadow 垂直阴影的位置
-
blur 模糊距离
-
color 阴影的颜色
动画
使用百分比来规定变化发生的时间，0%和100%，或用关键字 from和to
1、@keyframes 创建动画
# name 动画名称
# percent 百分比值，可以添加多个百分比值，为动画过程
@keyframes name{
from|0%{
css样式
}
percent{
css样式
}
to|100%{
css样式
}
}
2、使用动画
在需要动画的css定义中添加属性 animation
div{
animation: ...;
}
animation: name duration timing-function delay iteration-count direction
-
name 动画名称
-
duration 动画播放持续时间
-
timing-function 动画效果的速率
-
ease 逐渐变慢，默认值
-
linear 匀速
-
ease-in 加速
-
ease-out 减速
-
ease-in-out 先加速后减速
-
-
delay 延迟执行时间
-
iteration-count 播放动画循环次数，infinite 为无限次
-
direction 动画播放的方向
-
normal 向前播放
3 、执行动画
animation-play-state 控制动画播放状态：running 播放，paused 停止
# 添加一个动画执行的时机
div:hover{
animation-play-state:running;
}
媒体查询
使页面在不同终端设备下达到不同效果，会根据设备的大小自动识别加载不同的样式
<meta>标签
使用设备宽度作为视图宽度，禁止初始的缩放，在<head>中使用<meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1 user-scalable=no">
参数解释：
-
width=device-width，宽度等于当前设备宽度
-
initial-scale，初始缩放比例，默认为1
-
maximum-scale，允许用户缩放到的最大比例，默认为1
-
user-scalable 用户是否可以手动缩放，默认为no
@media screen and (max-width: 768px) {
/*设备小于768px加载的样式*/
div{
background-color: red;
}
}
@media screen and (max-width: 992px) and (min-width: 768px) {
/*设备在 768px ~ 992px加载的样式*/
div{
background-color: blue;
}
}
@media screen and (min-width: 992px) {
/*设备大于992px加载的样式*/
div{
background-color: green;
}
}
雪碧图
css sprite是一种网页图片应用处理方式，允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。
优点：
-
减少图片的字节
-
减少网页的http请求，提高页面性能
原理：
-
通过background-image引入背景图片
-
通过background-position把背景图片移动到自己需要的位置