CSS3知识点总结
1.background-origin: 规定背景图片的定位区域
| 值 | 描述 |
|---|---|
| padding-box | 背景图像相对内边距定位（默认值） |
| border-box | 背景图像相对边框定位【以边框左上角为参照进行位置设置】 |
| content-box | 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】 |
2.background-clip： 规定背景的绘制区域
| 值 | 描述 |
|---|---|
| border-box | 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】(默认值) |
| padding-box | 背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】 |
| content-box | 背景被裁切到内容区域【将背景图片在内容区域显示】 |
3.background-size： 规定背景图片的尺寸
| 值 | 描述 |
|---|---|
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
4.边框、阴影
| 属性 | 描述 |
|---|---|
| box-shadow | 盒子阴影 |
| border-image | 边框图片 |
| text-shadow | 文本阴影 |
5.CSS3新特性之选择器
1）属性选择器
| 选择器 | 描述 |
|---|---|
| [属性名=值] | 匹配属性等于值 |
| [属性名] | 匹配对应的属性 |
| [属性名^=值] | 以值开头 |
| [属性名*=值] | 包含值 |
| [属性名$=值] | 以值结束 |
2）结构伪类选择器
| 选择器 | 描述 |
|---|---|
| :first-child | 选中父元素中第一个子元素 |
| :last-child | 选中父元素中最后一个子元素 |
| :nth-child(n) | 选中父元素中正数第n个子元素 |
| :nth-last-child(n) | 选中父元素中倒数第n个子元素 |
备注：n 的取值大于等于0
n 可以设置预定义的值
odd[选中奇数位置的元素]
even【选中偶数位置的元素】
n 可以是一个表达式：
an+b的格式
3）其他选择器：
| 选择器 | 描述 |
|---|---|
| :target | 被锚链接指向的时候会触发该选择器 |
| ::selection | 当被鼠标选中的时候的样式 |
| ::first-line | 选中第一行 |
| ::first-letter | 选中第一个字符 |
6.渐变
| 值 | 描述 |
|---|---|
| linear-gradient | 线性渐变 |
| radial-gradient | 径向渐变 |
备注：线性渐变：
1. 开始颜色和结束颜色
2. 渐变的方向
3. 渐变的范围
background-image: linear-gradient(
to right,
red,
blue
);
表示方向：
1. to + right | top | bottom | left
2. 通过角度表示一个方向
0deg [从下向上渐变]
90deg【从左向右】
/* 径向渐变 */
background-image: radial-gradient(
100px at center,
red,
blue
);
7.2D转换、3D转换 transform
| 值 | 描述 |
|---|---|
| translate | 位移 |
| rotate | 旋转 |
| scale | 缩放 |
| skew | 倾斜 |
备注: perspective：透视，transform-style:preserve-3d 将平面图形转换为立体图形
8.过渡 transition
| 属性 | 描述 |
|---|---|
| transition-property | 设置对应属性参与到过渡动画中 |
| transition-duration | 设置过渡时间 |
| transition-delay | 设置过渡延时执行时间 |
| transition-timing-function | 设置过渡的速度类型 |
备注：参考https://www.cnblogs.com/afighter/p/5731293.html
9.动画 animation
/* 定义动画集 */
@keyframes rotate {
/* 定义开始状态 0%*/
from {
transform: rotateZ(0deg);
}
/* 结束状态 100%*/
to {
transform: rotateZ(360deg);
}
}| 属性 | 描述 |
|---|---|
| animation-name | 设置@keyframes 动画的名称 |
| animation-duration | 设置动画时间 |
| animation-interation-count | 设置动画执行次数。默认是 1 |
| animation-timing-function | 设置动画速度类型。默认是 "ease" |
| animation-direction | 动画是否在下一周期逆向地播放。默认是 "normal" |
| animation-fill-mode | 设置对象动画时间之外的状态 |
| animation-play-state | 设置动画是否正在运行或暂停。默认是 "running" |
10.CSS3新特性之网页布局
| 属性 | 描述 |
|---|---|
| flex-direction | 设置伸缩盒子主轴方向 |
| justify-content | 设置元素在主轴的对齐方式 |
| align-items | 设置元素在侧轴的对齐方式 |
| flex-wrap | 设置元素是否换行显示 |
| align-content | 设置元素换行后的对齐方式 |
| flex | 在子元素上设置在父元素中所占的比例 |
本文地址：https://blog.csdn.net/bboyjoe/article/details/85933575