摘要：Share interest, spread happiness, increase knowledge, and leave beautiful.
分享兴趣，传播快乐，增长见闻，留下美好！
亲爱的您，这里是LearningYard新学苑。
今天小编为大家带来
“学越千山：应用视觉设计——文本效果”
欢迎您的访问。
Share interest, spread happiness, increase knowledge, and leave beautiful.
Dear, this is the LearingYard Academy!
Today, the editor brings the
Learning over a thousand mountains：Text Effects，
Welcome to visit!
思维导图
Mind mapping
一、字体尺寸调整
I. Font Size Adjustment
属性：font-size
Property: font-size
作用：控制文本元素的显示大小
Function: Controls the display size of text elements
常用单位：
Common Units:
绝对单位：px(像素)、pt(点)
Absolute units: px (pixels), pt (points)
相对单位：em(相对于父元素)、rem(相对于根元素)、%(百分比)
Relative units: em (relative to parent element), rem (relative to root element), % (percentage)
视图单位：vw(视口宽度)、vh(视口高度)
Viewport units: vw (viewport width), vh (viewport height)
.title {
font-size: 2rem; /* 根元素字体2倍 */
font-size: 120%; /* 父元素字体1.2倍 */}
二、盒阴影效果
II. Box Shadow Effect
属性：box-shadow
Property: box-shadow
参数结构：
Parameter Structure:
inset作为可选参数用于定义内阴影效果，若未指定则默认呈现外阴影形态；
inset (optional): Defines inner shadow effect (defaults to outer shadow if unspecified);
水平偏移量通过offset-x控制，正值使阴影向右延伸，负值则向左偏移；
offset-x: Controls horizontal shadow displacement (positive values shift right, negative shift left);
垂直偏移量由offset-y决定，正值使阴影向下投射，负值产生向上偏移效果。
offset-y: Controls vertical shadow displacement (positive values shift downward, negative shift upward).
模糊程度由blur-radius参数调控，数值增大时边缘渐变效果增强，设为0时则呈现清晰实边；
blur-radius: Adjusts edge diffusion (higher values increase blur, 0 creates sharp edges);
spread-radius通过正负值调整阴影扩散范围，正值扩展阴影区域，负值实现收缩效果。
spread-radius: Modifies shadow diffusion range (positive expands, negative contracts).
color参数支持RGBA色彩模式，可精准控制阴影颜色及透明度，为设计提供丰富的视觉层次表达空间。
color: Supports RGBA color model for precise shadow color and opacity control, enabling rich visual hierarchy.
.card {
box-shadow:
0 10px 20px rgba(0,0,0,0.19), /* 底层：大范围柔光 */
0 6px 6px rgba(0,0,0,0.23); /* 表层：小范围硬光 */
}
三、透明度控制
III. Opacity Control
属性：opacity
Property: opacity
特性：
Characteristics:
值域：0(完全透明) ~ 1(完全不透明)
Value Range: 0 (fully transparent) to 1 (fully opaque)
继承性：子元素会继承透明度（与rgba颜色通道的区别）
Inheritance: Child elements inherit opacity values (differs from RGBA color channel behavior)
/* 方式1：整体透明 */
.overlay {
opacity: 0.5; /* 包含内容的整体半透明 */
}
/* 方式2：仅背景透明 */
.button {
background: rgba(0,0,0,0.5); /* 文字保持不透明 */
}
四、文本变形效果
IV. Text Transformation Effects
属性：text-transform
Property: text-transform
取值及效果：
Values and Effects:
使用lowercase可将输入文本如"TRANSFORM ME"统一转为全小写"transform me"，适用于需要标准化小写显示的场景；
lowercase: Converts input text (e.g., "TRANSFORM ME") to all lowercase ("transform me") – ideal for standardized small-text displays;
uppercase则将"transform me"转换为全大写的"TRANSFORM ME"，常用于标题强调或按钮文字的视觉强化；
uppercase: Converts input text (e.g., "transform me") to all uppercase ("TRANSFORM ME") – commonly used for heading emphasis or button text;
capitalize针对"transform me"生成"Transform Me"效果，实现专有名词或标题的首字母大写规范。
capitalize: Converts input text (e.g., "transform me") to title case ("Transform Me") – enforces proper noun/title capitalization rules;
none值可保持文本原始格式，用于覆盖继承样式；
none: Preserves original text formatting – useful for overriding inherited styles;
initial重置为浏览器默认状态；
initial: Resets to browser default settings;
inherit则强制继承父元素的文本转换规则，这两种取值在需要保持样式一致性或重置样式时发挥关键作用。
inherit: Forcibly adopts parent element's text transformation rules – critical for maintaining styling consistency or resetting styles
This structured approach ensures precise technical translation while preserving the original documentation's educational intent for CSS styling techniques.
/* 组合使用示例 */
.heading {
text-transform: uppercase;
letter-spacing: 2px; /* 配合大写增加字符间距 */
}
今天的分享就到这里了，
如果您对文章有独特的想法，
欢迎给我们留言。
让我们相约明天，
祝您今天过得开心快乐！
That's all for today's sharing.
If you have a unique idea about the article,
please leave us a message,
and let us meet tomorrow.
I wish you a nice day!
翻译：百度翻译
来源：伟宸教育