CSS3盒子阴影和背景渐变色
CSS3盒子阴影（box-shadow）
盒子阴影（box-shadow）是CSS3中常用的视觉效果，可以为元素添加阴影，从而提升页面的层次感和视觉效果。
基本语法
box-shadow: h-offset v-offset blur spread color;
h-offset: 阴影的水平偏移量。正值表示向右偏移，负值表示向左偏移。
v-offset: 阴影的垂直偏移量。正值表示向下偏移，负值表示向上偏移。
blur: 阴影的模糊半径。值越大，阴影越模糊。可选项。
spread: 阴影的扩展半径。正值表示阴影扩展，负值表示阴影收缩。可选项。
color: 阴影的颜色。可以使用任何有效的CSS颜色值。可选项。
简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影示例</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>在这个示例中，box-shadow: 10px 10px 5px #888888
水平偏移量：10px（向右）
垂直偏移量：10px（向下）
模糊半径：5px
阴影颜色：#888888
多重阴影
可以为一个元素添加多个阴影，只需用逗号分隔每个阴影定义。
box-shadow: 10px 10px 5px #888888, -5px -5px 10px #00ff00;
这个例子中，为元素添加了两个阴影：
第一个阴影向右和向下偏移，颜色为灰色。
第二个阴影向左和向上偏移，颜色为绿色。
内部阴影
内部阴影使用 inset 关键字。
box-shadow: inset 10px 10px 5px #888888;
这个例子中，阴影被应用在元素的内部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影示例</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 50px;
background-color: lightblue;
box-shadow: 10px 10px 5px #888888, inset -5px -5px 10px #00ff00;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>在这个示例中，我们结合使用了外部阴影和内部阴影：
外部阴影：水平偏移量10px，垂直偏移量10px，模糊半径5px，颜色#888888。
内部阴影：使用 inset 关键字，水平偏移量-5px，垂直偏移量-5px，模糊半径10px，颜色#00ff00。
实用建议
阴影效果要适度：过多的阴影可能会使页面显得杂乱无章。建议根据页面风格和设计需要，适度添加阴影。
使用RGBA颜色：为了实现更细腻的阴影效果，可以使用RGBA颜色（包含透明度），如 rgba(0, 0, 0, 0.5)。
配合其他CSS属性：阴影效果可以与其他CSS3属性（如 border-radius）结合使用，创建更丰富的视觉效果。
CSS3 背景渐变色
CSS3 提供了创建背景渐变色的方法，使得网页设计更加丰富和多样。主要有两种类型的渐变：线性渐变（linear-gradient）和径向渐变（radial-gradient）。
1. 线性渐变（linear-gradient）
线性渐变是沿着一条直线渐变的颜色过渡。
基本语法：
css
复制代码
background: linear-gradient(direction, color-stop1, color-stop2, ...);
参数：
direction：渐变的方向，可以是角度（如 45deg）或关键字（如 to right、to bottom）。
color-stop：颜色过渡点，可以是颜色值或带有百分比的位置。
示例：
css
复制代码
/* 从上到下的线性渐变 */
.background-1 {
background: linear-gradient(to bottom, red, blue);
}
/* 45度角的线性渐变 */
.background-2 {
background: linear-gradient(45deg, red, blue);
}
/* 带有多个颜色过渡点的线性渐变 */
.background-3 {
background: linear-gradient(to right, red, yellow, green, blue);
}
/* 带有具体位置的线性渐变 */
.background-4 {
background: linear-gradient(to right, red 20%, yellow 40%, green 60%, blue 80%);
}
2. 径向渐变（radial-gradient）
径向渐变是从一个中心点向外扩展的渐变颜色过渡。
基本语法：
css
复制代码
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
参数：
shape：渐变的形状，可以是 circle（圆形）或 ellipse（椭圆形），默认是椭圆形。
size：渐变的大小，可以是 closest-side、farthest-side、closest-corner、farthest-corner。
position：渐变的起始位置，可以是关键字（如 center、top left）或具体的坐标值。
color-stop：颜色过渡点，可以是颜色值或带有百分比的位置。
示例：
css
复制代码
/* 默认中心点的径向渐变 */
.background-5 {
background: radial-gradient(circle, red, blue);
}
/* 从左上角开始的径向渐变 */
.background-6 {
background: radial-gradient(circle at top left, red, blue);
}
/* 带有多个颜色过渡点的径向渐变 */
.background-7 {
background: radial-gradient(circle, red, yellow, green, blue);
}
/* 带有具体位置的径向渐变 */
.background-8 {
background: radial-gradient(circle at center, red 20%, yellow 40%, green 60%, blue 80%);
}
综合示例
以下是一个包含多种背景渐变色的完整示例：
html
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 背景渐变色示例</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.box {
width: 200px;
height: 200px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
text-align: center;
}
.background-1 {
background: linear-gradient(to bottom, red, blue);
}
.background-2 {
background: linear-gradient(45deg, red, blue);
}
.background-3 {
background: linear-gradient(to right, red, yellow, green, blue);
}
.background-4 {
background: linear-gradient(to right, red 20%, yellow 40%, green 60%, blue 80%);
}
.background-5 {
background: radial-gradient(circle, red, blue);
}
.background-6 {
background: radial-gradient(circle at top left, red, blue);
}
.background-7 {
background: radial-gradient(circle, red, yellow, green, blue);
}
.background-8 {
background: radial-gradient(circle at center, red 20%, yellow 40%, green 60%, blue 80%);
}
</style>
</head>
<body>
<div class="box background-1">线性渐变<br>（从上到下）</div>
<div class="box background-2">线性渐变<br>（45度角）</div>
<div class="box background-3">线性渐变<br>（多个颜色）</div>
<div class="box background-4">线性渐变<br>（具体位置）</div>
<div class="box background-5">径向渐变<br>（默认）</div>
<div class="box background-6">径向渐变<br>（左上角）</div>
<div class="box background-7">径向渐变<br>（多个颜色）</div>
<div class="box background-8">径向渐变<br>（具体位置）</div>
</body>
</html>
在这个示例中：
每个 .box 元素都有不同的背景渐变色效果。
使用了多种 linear-gradient 和 radial-gradient 的组合，展示了不同的渐变效果。
练习题 ：CSS3 盒子阴影
目标：创建一个带有阴影效果的卡片布局，包括外部阴影和内部阴影。
要求：
创建一个卡片容器，宽度 300px，高度 200px，背景色为白色，边框圆角为 10px。
给卡片添加一个外部阴影，水平偏移 10px，垂直偏移 10px，模糊半径 20px，颜色为 rgba(0, 0, 0, 0.2)。
在卡片内部添加一个带有内部阴影的文本区域，宽度 90%，高度 50%，内部阴影的水平偏移 -5px，垂直偏移 -5px，模糊半径 10px，颜色为 rgba(0, 0, 0, 0.1)。
参考答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow Exercise</title>
<style>
.card {
width: 300px;
height: 200px;
background-color: white;
border-radius: 10px;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
padding: 20px;
margin: 50px auto;
}
.inner-box {
width: 90%;
height: 50%;
background-color: lightgray;
box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.1);
margin: auto;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
需要购买本课才能留言哦~