利用css制作
利用CSS制作阴影效果
box-shadow属性
使用box-shadow可以为元素添加阴影效果，语法如下：
box-shadow: h-offset v-offset blur spread color inset;h-offset：水平阴影位置（正值向右，负值向左）。v-offset：垂直阴影位置（正值向下，负值向上）。blur：模糊距离（可选，值越大越模糊）。spread：阴影扩展尺寸（可选）。color：阴影颜色（默认为当前文本颜色）。inset：内阴影（可选，默认为外阴影）。
示例代码
div {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}利用CSS制作渐变背景
线性渐变
使用linear-gradient()创建线性渐变背景：
background: linear-gradient(direction, color-stop1, color-stop2, ...);direction：渐变方向（如to right、45deg）。color-stop：颜色及位置（如red 20%）。
示例代码
div {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}径向渐变
使用radial-gradient()创建圆形或椭圆形渐变：
background: radial-gradient(shape size at position, color-stop1, color-stop2);shape：ellipse（默认）或circle。size：渐变范围（如farthest-corner）。
示例代码
div {
background: radial-gradient(circle, #ff7e5f, #feb47b);
}利用CSS制作动画效果
关键帧动画
通过@keyframes定义动画序列，结合animation属性应用：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
div {
animation: slide 2s ease-in-out infinite;
}animation属性参数：名称、时长、速度曲线、延迟、次数、方向、填充模式。
过渡效果
使用transition为属性变化添加平滑过渡：
div {
transition: property duration timing-function delay;
}
button:hover {
background-color: #ff7e5f;
transition: background-color 0.3s ease;
}利用CSS制作响应式布局
媒体查询
通过@media规则适配不同屏幕尺寸：
@media (max-width: 768px) {
body {
font-size: 14px;
}
}弹性布局（Flexbox）
使用display: flex创建灵活的容器布局：
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}网格布局（Grid）
通过display: grid定义二维布局：
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 两列等宽 */
gap: 10px; /* 间隙 */
}
