使用 Ctrl+D 可将网站添加到书签
 
当前位置：码云笔记 > 前端开发 > CSS值类型文档吐血推荐
码云码云 前端开发

CSS值类型文档吐血推荐

目录
文章目录隐藏
  1. 一、索引
  2. 二、详细
  3. 结语

今天码云笔记为大家带来一篇有关 CSS 值类型文档总结。

CSS 值类型都是用“<>”括起来表示。本文类似参考文档，辛苦收集整理，内容有点长，建议大家 CTRL + D 收藏本站到收藏夹或者云笔记之类的。

一、索引

按照首字母排序。

二、详细

<angle>

角度值。支持负值。格式是数值+角度单位。

角度单位包括下面这 4 个，兼容性都是一样的 IE9+支持。

deg 角度。

我们日常所说“原地旋转 360 度”，这里的“度”就是 deg。一个完整的圆是 360deg。

grad 百分度。

百分度是角的测量单位，常用于建筑或土木工程的角度测量，非相关专业人士用的不多。一个完整的圆是 400grad。

rad 弧度。

弧度是一种用弧长与半径之比度量对应圆心角角度的方式。一个完整的圆的弧度是 2π，因此，一个完整的圆的弧度大约是 6.2832rad，而 1rad 则是 180/π角度。

turn 圈数。

一个完整的圆是 1 圈，也就是 1turn。同样 1/4 圆就是 0.25turn。

下表是角度值各个单位转换示意（取自 MDN）：

CSS 值类型文档吐血推荐

<angle-percentage>

表示 CSS 值的数据类型可以是<angle>类型，也可以是<percentage>类型。

如果是<percentage>类型，实际上会解析为<angle>类型，因此这种类型可以用在 calc()表达式中。

目前还没有什么 CSS 属性的值符合上面的数据类型。

<attr-fallback>

fallback 的概念在 CSS 变量那里就有所体现，例如下面代码中的#cd0000 就是 fallback 兜底备份值：

.var-fallback {
    background-color: var(--color-zhangxinxu, #cd0000);
}

而<attr-fallback>是针对 attr()表达式而言的。

大家对 attr()表达式的印象应该都在 content 内容生成时候，那还是老语法：

attr( <attr-name> )

而这里所说<attr-fallback>是 attr()表达式经过扩展后的全新的语法。

attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )

多了<type-or-unit>和<attr-fallback>这两个可选类型。

我们直接看一个例子，以便快速了解这两个可选参数是什么意思。

我们要实现这样一个功能，元素的宽度是根据设置的 size 属性值决定的，例如：

<button size="80">宽度 80px</button>
<button size="120">宽度 120px</button>
<button size="160">宽度 160px</button>

则可以使用下面的 CSS 语法：

button[size] {
    width: attr(size px, auto);
}

其中，px 就是<type-or-unit>，表示 size 值单位是 px，如果没有这个参数，则以字符串显示 size 的属性值；auto 就是<attr-fallback>类型。表示如果元素没有设置 size 属性值，或者设置的 size 值无法正确解析，就按照 auto 渲染。

But！目前尚未有浏览器支持该语法，遗憾。

<attr-name>

例如：

.attr-name::before {
  content: attr(data-mybj);
}

上面的 data-mybj 就是<attr-name>类型。

<basic-shape>

<basic-shape>类型用在 clip-path，shape-outside 以及 offset-path 属性中，表示基础形状。

例如：

clip-path: inset(22% 12% 15px 35px);
clip-path: circle(6rem at 12rem 8rem);
clip-path: ellipse(115px 55px at 50% 40%);
clip-path: polygon(50% 20%, 90% 80%, 10% 80%);
clip-path: path(evenodd, "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z");

形状方法语法

inset() 定义内嵌矩形。可以指定圆角大小，生成圆角矩形形状。

inset( <shape-arg>{1,4} [round <border-radius>]? )

circle() 定义圆形。可以指定圆的半径大小和圆心位置。

circle( [<shape-radius>]? [at <position>]? )

ellipse() 定义椭圆。可以指定椭圆的半径大小和圆心位置。

ellipse( [<shape-radius>{2}]? [at <position>]? )

polygon() 定义多边形。 可以指定填充规则是 nonzero（默认值）还是 evenodd，以及具体形状参数。

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

path() 定义路径。表示填充规则，就是 SVG Path 路径了，需要引号。

path( [<fill-rule>,]? <string>)

<blend-mode>

<blend-mode>是混合模式类型，用在 background-blend-mode 这 mix-blend-mode 这两个混合模式属性上。

包括下面这些具体的值：

normal 正常呈现，谁在上面显示谁。

multiply 正片叠底。模拟颜料的颜色混合。颜色会变得更暗。

screen 滤色。模拟自然光颜色混合。颜色会变得更亮一些。

overlay 叠加。底下颜色更深则走 multiply 模式，底下颜色更浅则走 screen 模式。

darken 深色。哪个颜色深显示哪个。

lighten 浅色。哪个颜色浅显示哪个。

color-dodge 颜色减淡。最终颜色是底色除以顶色的倒数的结果。

color-burn 颜色加深。最终颜色是反转底部颜色、将值除以顶部颜色并反转该值的结果。

hard-light 强光。上面的颜色更深的时候表现为 multiply，上面颜色更淡的时候表现为 screen。这个值和 overlay 值类似，只是上下层作用条件对换了。

soft-light 柔光。最终的颜色类似于 hard-light 强光，但更柔和。此混合模式的行为类似于强光。这种效果类似于将漫射的聚光灯照射在背景上。

difference 差值。最后的颜色是从较浅的颜色中减去两种颜色中较深的颜色的结果。黑色层无效，而白色层反转另一层的颜色。

exclusion 排除。类似 difference，但比 difference 对比度较低。与 difference 一样，黑色层没有效果，而白色层反转另一层的颜色。

hue 色调。最终颜色具有顶部颜色的色调，而使用底部颜色的饱和度和亮度。

saturation 饱和度。最终颜色具有顶部颜色的饱和度，同时使用底部颜色的色调和亮度。纯灰色的背景，没有饱和度，就没有效果。

color 颜色。最终颜色具有顶部颜色的色调和饱和度，而使用底部颜色的亮度。该效果保留了灰度，并可用于给前景着色。

luminosity 亮度。最终颜色具有顶部颜色的亮度，而使用底部颜色的色调和饱和度。这种混合模式相当于 color，但层是交换的。

<calc-product>

calc()方法中一种类型。例如：

.some-mybj-class {
    width: calc( 100px / 3 + 30px * 2);
}

其中：

  • 100px / 3 + 30px * 2 指的就是<calc-sum>；
  • 100px / 3 和 30px * 2 就是<calc-product>；
  • 100px，3，30px，2 就是<calc-value>。

完整语法如下：

<calc()>  = calc( <calc-sum> )
<min()>   = min( <calc-sum># )
<max()>   = max( <calc-sum># )
<clamp()> = clamp( <calc-sum>#{3} )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

<calc-sum>

calc()方法中一种类型，表示 CSS 数学计算函数内的整个计算表达式。

具体参见<calc-product>。

<calc-value>

calc()方法中一种类型，表示计算表达式中各个具体的计算项。

具体参见<calc-product>。

<color>

表示色值类型。

这里是概要：

颜色关键字

例如&#x27;red&#x27;,&#x27;blue&#x27;等。目前全部 147 个颜色关键字及对应颜色值参见这里。

transparent

transparent 关键字，例如：color:transparent。

currentColor

颜色变量。

RGB 颜色

语法包括：#RRGGBB[AA]，#RGB[A]，rgb[a](R,G,B[,A])以及 rgb[a](R G B[/A])（CSS Colors Level 4 中新增）。

HSL 颜色

语法包括：hsl[a](H,S,L[,A])，以及 CSS Colors Level 4 中新增的 hsl[a](H S L[/A])。

系统颜色

系统颜色关键字，不同操作系统以及不同操作系统主题下的具体表现的颜色是不一样的，因此不推荐在对外的产品中使用。

<color-stop>

<color-stop>属于 CSS Images Module Level 中的类型值，表示颜色断点。

多出现在 CSS 渐变中，例如：

.mybj-gradient {
    background-image: linear-gradient(red 20%, blue 80%);
}

其中 red 20%以及 blue 80%就是<color-stop>类型。

<color-stop-list>

<color-stop-list>表示多个<color-stop>的集合。

借用上面<color-stop>的例子，其中 red 20%,blue 80%就属于<color-stop-list>。

<custom-ident>

<custom-ident>数据类型表示用户定义的用作标识符的任意字符串。它是区分大小写的，并且在不同的上下文中禁止某些值以防止歧义。

例如 CSS animation 动画自定义的动画名称。

.mybj-animation {
    animation: fadeIn .2s;
}

上面的 fadeIn 就是<custom-ident>数据类型。

类似的还有 CSS Counter 计数器，例如：

.mybj-counter {
    counter-reset: zhangxinxuCom;
}

禁止的值

为了防止冲突，并不是所有的字符串都属于<custom-ident>，例如 CSS 中的全局关键字值 unset, initial, inherit 以及 none 都是不允许的。还有 disc, circle, square, decimal 等 list-style-type 关键字值不允许，span 也不允许，因为为何 grid 布局中 grid-row-start，grid-row-end，grid-column-start，grid-column-end 等属性冲突。

<dimension>

<dimension>表示尺寸类型。由数字和单位构成，例如 666px。

<filter-function>

<filter-function>表示滤镜函数，被用在 filter（本身应用滤镜）和 backdrop-filter（本身不应用滤镜，后面元素应用）属性中。

该类型包括的值有：

  • blur() 模糊。
  • brightness() 亮度变化。
  • contrast() 对比度变化。
  • drop-shadow() 投影。
  • grayscale() 灰度。
  • hue-rotate() 色调旋转。
  • invert() 反相
  • opacity() 透明度变化。
  • saturate() 饱和度变化。
  • sepia() 褐色。

<flex>

<flex>数据类型表示 grid 容器可伸缩的长度。被用在 grid-template-columns，grid-template-rows 以及其他相关属性中。

该类型值格式固定，数字后面跟着单位 fr。fr 单位表示网格容器中剩余空间的份数。

例如：

1fr    /* 整数值 */
2.5fr  /* 小数值 */

关于 Grid 布局，可以参考我之前写的“CSS Grid 网格布局实例教程”一文。

<frequency>

<frequency>类型表示频率，跟着下面两种单位：

Hz 赫兹。例如：0Hz,666Hz,23333Hz。

kHz 千赫兹。例如：0kHz,1.314kHz,5555kHz。

目前还没有任何 CSS 属性支持<frequency>类型。

<frequency-percentage>

<frequency-percentage>类型表示值既可以是<frequency>类型，又可以是<percentage>类型。

多用在 calc()计算中。

<gradient>

<gradient>表示渐变类型。

目前有 4 类渐变类型。分别是：

线性渐变

例如：

.linear-gradient {
    background: linear-gradient(#f69d3c, #3f87a6);
}

径向渐变

例如：

.radial-gradient {
    background: radial-gradient(#f69d3c, #3f87a6);
}

重复渐变

例如：

.repeating-linear-gradient {
    background: repeating-linear-gradient(#f69d3c, #3f87a6 50px);
}
.repeating-radial-gradient {
    background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);
}

锥形渐变

例如：

.linear-gradient {
    background: conic-gradient(#f69d3c, #3f87a6);
}

<ident>

<ident>是文本数据类型中 CSS 标识符，由一系列符合<ident token>语法的字符组成。CSS 属性接受两类标识符：预定义的关键字和作者定义的标识符。

注意：<ident>不适用于属性值定义，应使用<custom ident>。<ident>为定义其他句法结构提供了便利。

目前没有 CSS 属性符合该类型。

<image>

CSS<image>数据类型表示二维图像。有两种图像：用<url>引用的普通图像和用<gradient>或 element()生成的动态图像。附加的 CSS 图像函数包括 image()（目前没有任何浏览器支持）,image-set()（根据屏幕指定不同图像）,以及 cross-fade()。

<image>数据类型可以被多种 CSS 属性使用，例如：background-image，border-image，content，cursor，以及 list-style-image。

<integer>

<integer>表示整数数值类型。用在 column-count，counter-increment，grid-column，grid-row 以及 z-index 等 CSS 属性中。

一些旧的浏览器有最大值限制，例如 IE 最大 220-1，不过现在新的规则已经不在限定数值范围了。

下面这些值都是有效的：

12          正数
+123        正数带加号
-456        负数
0           零
+0          零，带加号
-0          零，带负号

下面这些值都是无效的：

12.0        <number>类型，非<integer>类型，尽管表示的数值是相等的。
12.         小数点是不允许的。
+---12      只允许一个 +/- 负号。
ten         字母不允许。
_5          住字符不允许。
\35         Unicode 转义字符不允许，虽然代表的就是整数（这里是 5）。
\4E94       不允许使用非阿拉伯数字，即使转义形式。（这里是五）。
3e4         不允许使用科学符号。

<length>

<length>类型表示距离值。这种类型被多个 CSS 属性使用，例如：width，height，margin，padding，border-width，font-size，text-shadow 等。

该类型包含非常多种类的单位。

相对长度单位

文字相关长度

cap实验

表示元素字体的“大写高度”（大写字母的名义高度）。

ch

字符 ‘0’（Unicode 值是 U+0030）所占据的宽度。

em

表示元素的计算字体大小。如果用于字体大小属性本身，则表示元素的继承字体大小。

ex

表示元素当前的 x-height，也就是字母 ‘x’ 的高度。

ic实验

相当于“水”（CJK 语言体系中水，U+6C34）这个字在当前字体中渲染的尺寸。

lh实验

相当于当前元素 line-height 属性的计算值，会转换为绝对长度单位。

rem

相对于根元素的字体大小。

rlh

相对于根元素的行高大小。

视区相关长度

vh

浏览器窗口视区 1%的高度。

vw

浏览器窗口视区 1%的宽度。

vi实验

根元素的内联轴（默认水平）的方向上的 1%的初始包含块大小。

vb实验

根元素的块状轴（默认垂直）的方向上的 1%的初始包含块大小。

vmin

等于 vh 和 vw 较小的值。

vmax

等于 vh 和 vw 较大的值。

绝对长度单位

px

对于屏幕显示，1 像素通常表示一个设备像素（点）。然而，对于打印机和高分辨率屏幕，一个 CSS 像素意味着多个设备像素。1px=1 英寸的 1/96。

cm

厘米。1cm = 96px/2.54

mm

毫米。1mm = 1cm/10

Q实验

1/4 毫米，也就是 1/40 厘米。

in

英寸。1in = 2.54cm = 96px

pc

派卡。1pc = 12pt = 1in/6
pt

点。1pt = 1in/72

<length-percentage>

<length-percentage>类型表示既能是长度值，也能是百分比值。

例如宽度 width 属性，技能是长度值，也能是百分比值。

.some-mybj-cl {
    width: 200px;
}
.some-mybj-cl {
    width: 20%;
}

因此，下面的 calc()计算也是合法的，可解析的：

.by-mybj {
    width: calc(100% - 200px);
}

<number>

<number>类型表示值可以是整数也可以是小数。

该类型属性职业支持幂计算形式，例如：

10e3        科学记数法
-3.4e-2     复杂科学记数法

<number-percentage>

<number-percentage>类型表示值既可以是<number>类型，又可以是<percentage>类型。

例如缩放：

.scale-mybj {
    transform: scale(1.5);
}
.scale-mybj{
    transform: scale(150%);
}

其中，scale()方法内的值就是<number-percentage>类型，1.5 和 150%作用一模一样。

<percentage>

<percentage>是百分比值数据类型，通常相对于父辈元素对象进行计算。支持的 CSS 属性有：width，height，margin，padding 以及 font-size 等。

.percentage-mybj {
    margin-left: 23%;
}

<position>

CSS<position>数据类型表示用于设置相对于元素框的位置的二维坐标。常用于 background-position 和 offset-anchor 属性中。

<quote>

<quote>类型出现在 CSS Generated Content Module 规范文档中。表示引号，往往和语言相关。

语法如下：

<quote> = open-quote | close-quote | no-open-quote | no-close-quote

其中对应的 CSS 代码：

/* 为不同语言指定引号的表现 */
:lang(en) > q {quotes: '"' '"';}
:lang(no) > q {quotes: "«" "»";}
:lang(ch) > q {quotes: "“" "”";}

/* 在 q 标签的前后插入引号 */
q:before {content: open-quote;}
q:after  {content: close-quote;}

其中出现的 open-quote 和 close-quote 就是<quote>类型。

<ratio>

<ratio>数据类型用来描述媒体查询中的纵横比，表示两个无单位值之间的比例。

例如：

/* 横纵比大于 16:9 的时候... */
@media screen and (min-aspect-ratio: 16/9) { ... }

<resolution>

<resolution>数据类型用于描述媒体查询中的分辨率，表示输出设备的像素密度，即分辨率。

支持以下这些单位：

dpi

表示每英寸点数。屏幕通常每英寸包含 72 或 96 点，但打印文档的 dpi 通常要大得多。因为 1 英寸是 2.54 厘米，1dpi≈0.39 dpcm。IE9+浏览器支持。

dpcm

表示每厘米的点数。因为 1 英寸是 2.54 厘米，1dpcm≈2.54 dpi。IE9+浏览器支持。

dppx

表示每像素单位的点数。由于 CSS in（英寸）与 CSS px（像素）的 1:96 固定比率，1dppx 相当于 96dpi，对应于由 image-resolution 定义的 CSS 中显示的图像的默认分辨率。IE 浏览器不支持，Edge12+支持。

x

dppx 的别名。

使用示意：

/* 如果每英寸像素点大于 300... */
@media print and (min-resolution: 300dpi) { ... }

<shape-box>

<shape-box>数据类型源自 CSS Shapes Module 规范文档，与 CSS shapes 布局密切有关。

CSS shape-outside 属性语法是这样的：

shape-outside: none | [ <basic-shape> || <shape-box> ] | <image>

<shape-box>（图形盒子）就是 CSS2.1 中的基本<box>模型的 4 种盒子，分别是 margin-box，border-box，padding-box 和 content-box。要来指定文字环绕的时候是依照哪个盒子的边缘来计算的。

<shape-radius>

在 CSS Shapes 布局中，我们可以把形状指定为<basic-shape>，其中圆形和椭圆中指定半径的参数就是<shape-radius>类型，标记：

circle() = circle( [<shape-radius>]? [at <position>]? )
ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )

<shape-radius>类型本身语法如下：

<shape-radius> = <length> | <percentage> | closest-side | farthest-side

<side-or-corner>

<side-or-corner>表示边角类型，主要用在线性渐变中。

语法为：

<side-or-corner> = [left | right] || [top | bottom]

还可以使用 to 关键字指定方向，例如：

.mybj-gradient {
    background: linear-gradient(to right, deepskyblue, skyblue);
}

<string>

CSS<string>类型表示一系列的字符，字符数据类型在多个 CSS 属性中应用，如 content，font-family 以及 quotes 等。

示意：

.by-author::before {
   content: '如果发现本文盗用，欢迎反馈给 zhangxinxu';
}
.some-font {
   font-family: 'Microsoft Yahei';
}

<time>

<time>是时间数据类型，多用在 animation，transition 以及相关 CSS 属性中。

支持两个单位，如下：

s

秒。

ms

毫秒。1 秒=1000 毫秒。

<time-percentage>

<time-percentage>数据类型，表示值是<time>类型或者<percentage>类型。

<timing-function>

<timing-function>指时间函数类型，目前应用就是在 CSS animation 动画中的贝斯尔函数曲线，例如：

.timing-function {
    animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

<toggle-value>

<toggle-value>数据类型表示切换数据类型，用在 toggle()函数中（目前还没有浏览器支持），语法如下：

toggle( # )

关于 toggle()函数

这里多嘴举两个例子介绍下这个未来很可能出现的新函数。

下面的示例通常使元素变为斜体，但如果元素位于斜体内容中，则使它们变为正常样式：

em { font-style: toggle(italic, normal); }

下面的示例循环嵌套列表的标记，以便最外层列表具有圆盘标记，但嵌套列表使用圆形、方形、长方体，然后在标记形状列表中重复此操作，再次使用 disc 开始（对于第五个列表深度）。

ul { list-style-type: toggle(disc, circle, square, box); }

<transform-function>

<transform-function>表示表示影响元素外观的转换的数据类型，例如旋转，缩放，移动等，用在 transform 属性中。

transform 变换的底层都是矩阵计算，支持的<transform-function>值包括下面这些：

矩阵变换

matrix()

2D 矩阵变换。

matrix3d()

3D 矩阵变换。

透视

perspective()

设置用户与 z=0 平面之间的距离。

旋转

rotate()

围绕某一个点进行 2d 旋转。

rotate3d()

为了某一个点的 3d 空间旋转。

rotateX()

水平轴旋转。

rotateY()

垂直轴旋转。

rotateZ()

Z 轴旋转。

缩放

scale()

2d 缩放。

scale3d()

3d 缩放。

scaleX()

水平轴缩放。

scaleY()

垂直则缩放。

scaleZ()

Z 轴缩放。

倾斜

skew()

在二维平面上倾斜元素。

skewX()

水平方向倾斜。

skewY()

垂直方向倾斜。

位移

translate()

2d 位移。

translate3d()

3d 位移。

translateX()

水平轴位移。

translateY()

垂直则位移。

translateZ()

Z 轴位移。

<type-or-unit>

<type-or-unit>表示类型或者单位，用在 CSS attr()函数方法中。

例如：

<stock>
  <wood length="12"/>
  <wood length="5"/>
  <metal length="19"/>
  <wood length="4"/>
</stock>

stock > * {
    display: block;
    width: attr(length em); /* 默认是 0 */
    height: 1em;
    border: solid thin;
    margin: 0.5em;
}

其中 em 就属于<type-or-unit>类型，用的是 unit 类型。

又例如：

<span class="attr-as-color" data-color="#34538b">color 属性赋色</span>

.attr-as-color {
    color: attr(data-color color);
}

此时，attr()方法中的 color 就是<type-or-unit>类型，用的是 type 类型。

<type-or-unit>支持的完成类型如下：

string

属性值作为字符串。

color

属性值作为色值类型。

url

属性值作为 URL 地址，可以用在 url()方法中。

interger

属性值作为整数。

.example {
    z-index: attr(data-z-index interger);
}

number

属性值作为数值。

length, angle, time, frequency

作为长度值，角度值，时间或者频率。

%

单位关键字

<length>， <angle>，<time>，和<frequency>单位中任意匹配的一个关键字，例如 deg, em, ms 等。

<url>

<url>指的是外部资源引用数据类型，常用在 background-image，cursor 以及 list-style 等 CSS 属性以及 font-face 等 CSS 规则中。

例如：

header {
    background: url(mybj-banner.png) no-repeat top;
}
ul {
  list-style: square url(https://www.example com/mybj-ball.png);
}

<url-modifier>

<url-modifier>表示 URL 修饰符数据类型。

例如：

header {
    background: url(mybj-banner.png xxx) no-repeat top;
}

后面的 xxx 就是 URL 修饰符，不过我查了目前所有的模块规范文档，对了这个 URL 修饰符并没有定义。

This specification does not define any <url-modifier>s, but other specs may do so.

规则各自为政有时候也有不好的地方。

<zero>

<zero>数据类型表示 0，就是如字面看到的显示的值是 0 的数字。仅计算为值为 0 的<number>的表达式（例如 calc(0)）与<zero>不匹配；只有<number-token>才匹配。

结语

还有不少遗漏，欢迎补充。感谢阅读，欢迎分享，欢迎收藏！

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
码云笔记 » CSS值类型文档吐血推荐

码云 会员

分享到：

相关推荐

发表回复