网站
引入
圆角和阴影是现代网页里很常见的视觉效果。
圆角可以让元素更柔和，阴影可以让元素产生层次感，常用于按钮、卡片、弹窗、头像等场景。
正文
定义
定义
border-radius用于设置元素圆角，box-shadow用于设置元素盒子阴影，text-shadow用于设置文字阴影。
这几个属性不会改变元素内容本身，只是改变它们在页面中的显示效果。
圆角 border-radius
border-radius 用于控制元素边角的圆润程度。
.box {
border-radius: 12px;
}数值越大，圆角越明显。
单独设置四个角
.box {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}也可以使用简写：
.box {
border-radius: 12px 12px 0 0;
}顺序是：左上、右上、右下、左下。
做圆形
如果元素宽高相同，使用 border-radius: 50%; 可以做圆形。
<img class="avatar" src="avatar.jpg" alt="头像">.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
}常用于头像、圆形图标。
胶囊按钮
border-radius: 999px; 常用于做胶囊形状。
.btn {
padding: 8px 18px;
border-radius: 999px;
background-color: #2563eb;
color: white;
}这种写法不用精确计算高度，比较方便。
盒子阴影 box-shadow
box-shadow 用于给元素添加阴影。
.card {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}常见结构：
box-shadow: 水平偏移 垂直偏移 模糊半径 颜色;例如：
.panel {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}阴影扩展值
box-shadow 还可以加扩展半径。
.box {
box-shadow: 0 8px 20px 4px rgba(0, 0, 0, 0.12);
}结构可以理解为：
box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色;内阴影
使用 inset 可以做内阴影。
.input {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);
}内阴影像是元素内部凹进去的效果。
文字阴影 text-shadow
text-shadow 用于给文字添加阴影。
.title {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}常见结构：
text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;文字阴影适合海报标题、图片上的文字，不适合普通正文大量使用。
例子
卡片效果
<div class="card">
<h3>学习 CSS</h3>
<p>圆角和阴影可以让卡片更有层次。</p>
</div>.card {
padding: 24px;
border-radius: 16px;
background-color: white;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}这个例子里，border-radius 控制圆角，box-shadow 控制阴影。
悬停加深阴影
.card {
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}鼠标移上去时，卡片会轻微上浮，阴影变深。
特点
border-radius用于设置圆角border-radius: 50%;常用于做圆形border-radius: 999px;常用于做胶囊按钮box-shadow用于设置盒子阴影text-shadow用于设置文字阴影- 阴影不要太重，否则页面会显得脏
- 圆角和阴影常和
transition、transform搭配使用
理解
圆角主要改变元素边缘的感觉，阴影主要制造元素之间的层次。
可以把圆角理解为“让盒子变柔和”，把阴影理解为“让盒子从背景里浮出来”。
实际写页面时，圆角和阴影要统一，不要每个地方都随便写不同的值。
引出
理解圆角和阴影之后，可以继续学习 CSS 过渡 和 CSS 2D 和 3D 转换，做更自然的悬停交互效果。