css3

边框

属性 说明 CSS
border-image 设置所有边框图像的速记属性。 3
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3
box-shadow 附加一个或多个下拉框的阴影 3

圆角

border-radius

背景

  • background-image
  • background-size
  • background-origin
  • background-clip | 顺序 | 描述 | CSS | | —- | —- | —- | | background-clip | 规定背景的绘制区域。 | 3 | | background-origin | 规定背景图片的定位区域。 | 3 | | background-size | 规定背景图片的尺寸。 | 3 |

渐变

线性渐变（Linear Gradients）
  • 向下/向上/向左/向右/对角方向
    1. background-image: linear-gradient(angle, color-stop1, color-stop2);
    repeating-linear-gradient() 函数用于重复线性渐变：
    1. #grad {
    2. /* 标准的语法 */
    3. background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
    4. }
    径向渐变（Radial Gradients）
  • 由它们的中心定义
    1. background-image: radial-gradient(shape size at position, start-color, ..., last-color);

    文本效果

    | 属性 | 描述 | CSS | | —- | —- | —- | | hanging-punctuation | 规定标点字符是否位于线框之外。 | 3 | | punctuation-trim | 规定是否对标点字符进行修剪。 | 3 | | text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 | | text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 3 | | text-justify | 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 | 3 | | text-outline | 规定文本的轮廓。 | 3 | | text-overflow | 规定当文本溢出包含元素时发生的事情。 | 3 | | text-shadow | 向文本添加阴影。 | 3 | | text-wrap | 规定文本的换行规则。 | 3 | | word-break | 规定非中日韩文本的换行规则。 | 3 | | word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | 3 |

字体

  1. @font-face
  2. {
  3.     font-family: myFirstFont;
  4.     src: url(sansation_bold.woff);
  5.     font-weight:bold;
  6. }

CSS3 字体描述

下表列出了所有的字体描述和里面的@font-face规则定义

描述符 值 描述
font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch
- normal
- condensed
- ultra-condensed
- extra-condensed
- semi-condensed
- expanded
- semi-expanded
- extra-expanded
- ultra-expanded
 可选。定义如何拉伸字体。默认是 “normal”。
font-style
- normal
- italic
- oblique
 可选。定义字体的样式。默认是 “normal”。
font-weight
- normal
- bold
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
 可选。定义字体的粗细。默认是 “normal”。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

2D转换

转换属性

Property 描述 CSS
transform 适用于2D或3D转换的元素 3
transform-origin 允许您更改转化元素位置 3

2D转换方法

函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

3D转换

转换属性

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 3
perspective 规定 3D 元素的透视效果。 3
perspective-origin 规定 3D 元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3

3D 转换方法

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

过渡

属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

动画

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3

多列

属性 描述
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns column-width 与 column-count 的简写属性。

用户界面

属性 说明 CSS
appearance 允许您使一个元素的外观像一个标准的用户界面元素 3
box-sizing 允许你以适应区域而用某种方式定义某些元素 3
icon 为创作者提供了将元素设置为图标等价物的能力。 3
nav-down 指定在何处使用箭头向下导航键时进行导航 3
nav-index 指定一个元素的Tab的顺序 3
nav-left 指定在何处使用左侧的箭头导航键进行导航 3
nav-right 指定在何处使用右侧的箭头导航键进行导航 3
nav-up 指定在何处使用箭头向上导航键时进行导航 3
outline-offset 外轮廓修饰并绘制超出边框的边缘 3
resize 指定一个元素是否是由用户调整大小 3

图片

按钮

button 后的伪元素
:hover
:active

分页

框大小

flex布局

弹性盒子

属性 描述
display 指定 HTML 元素盒子类型。
flex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写
order 设置弹性盒子的子元素排列顺序。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex 设置弹性盒子的子元素如何分配空间。

flex

语法

flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

各个值解析:

  • auto: 计算值为 1 1 auto
  • initial: 计算值为 0 1 auto
  • none：计算值为 0 0 auto
  • inherit：从父元素继承
  • [ flex-grow ]：定义弹性盒子元素的扩展比率。
  • [ flex-shrink ]：定义弹性盒子元素的收缩比率。

  • [ flex-basis ]：定义弹性盒子元素的默认基准值。

    多媒体查询

    CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。
    媒体查询可用于检测很多事情，例如：

  • viewport(视窗) 的宽度与高度

  • 设备的宽度与高度
  • 朝向 (智能手机横屏，竖屏) 。
  • 分辨率

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

多媒体类型
  1. //在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏：
  2. @media screen and (max-width: 600px) {
  3.   div.example {
  4.     display: none;
  5.   }
  6. }
值 描述
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。
speech 用于屏幕阅读器

网络布局(grid)

网格容器(display 属性设置为 grid 或 inline-grid)
网路元素（grid-column）

属性 描述
column-gap 指定列之间的间隙
gap row-gap 和 column-gap 的简写属性
grid grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
grid-area 指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-auto-columns 指的默认的列尺寸
grid-auto-flow 指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
grid-auto-rows 指的默认的行尺寸
grid-column grid-column-start 和 grid-column-end 的简写属性
grid-column-end 指定网格元素列的结束位置
grid-column-gap 指定网格元素的间距大小
grid-column-start 指定网格元素列的开始位置
grid-gap grid-row-gap 和 grid-column-gap 的简写属性
grid-row grid-row-start 和 grid-row-end 的简写属性
grid-row-end 指定网格元素行的结束位置
grid-row-gap 指定网格元素的行间距
grid-row-start 指定网格元素行的开始位置
grid-template grid-template-rows, grid-template-columns 和 grid-areas 的简写属性
grid-template-areas 指定如何显示行和列，使用命名的网格元素
grid-template-columns 指定列的大小，以及网格布局中设置列的数量
grid-template-rows 指定网格布局中行的大小
row-gap 指定两个行之间的间距