文字阴影通过text-shadow属性增强文字层次，语法包含偏移、模糊与颜色值；2. 边框使用border设置样式，并结合border-radius和box-shadow提升视觉效果；3. 实战中组合应用可创建具设计感的卡片标题与容器，提升界面美观度。
在CSS初级项目实战中，文字阴影和边框效果是提升页面视觉表现力的常用技巧。合理使用这些样式可以让标题、按钮或卡片内容更具层次感和吸引力。
文字阴影（text-shadow）
使用 text-shadow 属性可以为文字添加阴影效果，增强可读性和设计感。基本语法包括四个值：水平偏移、垂直偏移、模糊半径和颜色。
例如：text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
- 第一个值（2px）表示阴影向右偏移
- 第二个值（2px）表示向下偏移
- 第三个值（4px）是模糊程度，值越大越柔和
- 第四个值是阴影颜色，推荐使用rgba以便控制透明度
常见应用场景：标题突出显示、深色背景上的文字增强对比、艺术字效果。
立即学习“前端免费学习笔记（深入）”；
边框效果（border）与扩展样式
CSS中的 border 不仅能画出线条，还能结合圆角、阴影等属性创造丰富视觉效果。
基础边框写法：border: 2px solid #007bff;
- 设置边框宽度、样式（如solid、dashed、dotted）和颜色
- 可单独设置某一边：border-left、border-bottom 等
配合 border-radius 可创建圆角：
border-radius: 8px; 让元素四角变圆润，适合按钮或卡片容器。
进阶技巧：使用 box-shadow 模拟外发光或内阴影边框：
box-shadow: 0 0 10px blue inset; 实现内部辉光效果，常用于输入框聚焦状态。
综合实战示例：带阴影标题和装饰边框的卡片
在一个简单的项目中，你可以这样组合使用：
.card {
border: 1px dashed #ccc;
border-radius: 12px;
padding: 20px;
margin: 20px;
background: #f9f9f9;
}
.card h2 {
color: #333;
text-shadow: 1px 1px 2px black;
}
这样就创建了一个有质感的卡片组件，文字清晰易读，整体更有设计感。
基本上就这些，掌握好 text-shadow 和 border 的基本用法，就能在日常项目中快速提升界面美观度。
