CSS学习条记5——渐变属性+盒子模子阶段案例

发表于 2025-10-5 08:51:18

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

目次
平凡易懂的表明
渐变的范例
1、线性渐变
渐变过程
2、径向渐变
怎样明白CSS的径向渐变，以及其渐变属性
平凡易懂的表明
渐变属性
1. 形状（Shape）
2. 巨细（Size）
3. 颜色停靠点（Color Stops）
代码分析
渐变过程
3、重复渐变
4、阶段案例——感动中国人物榜

CSS 的渐变属性允许你创建从一种颜色平滑过渡到另一种颜色的配景效果。
  平凡易懂的表明

  想象一下，你在画一幅画，你想让颜色从赤色渐渐变成蓝色。你不会直接在赤色旁边画蓝色，而是让它们之间有一个过渡地区，赤色徐徐变成蓝色。CSS 的渐变属性就是用来实现这种效果的。
  渐变的范例

线性渐变（Linear Gradient）：颜色沿着直线方向变革，比如从左到右、从上到下。
径向渐变（Radial Gradient）：颜色从一个中央点向外扩散，比如从中央到边沿。

总结：CSS 渐变属性让你可以在网页上创建颜色平滑过渡的效果。你可以选择线性渐变（沿直线变革）或径向渐变（从中央向外变革），并指定起始和竣事颜色。
1、线性渐变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子模型</title>
<style type="text/css">
p{
width: 200px;
height: 200px;
background-image: linear-gradient(30deg,#0f0 50%,#ccc 70%,red 80%);
}
</style>
</head>
<body>
<p>"但行好事，莫问前程" 是镌刻在文明基因里的生命密码。</p>
</body>
</html>

复制代码

渐变核心代码（background-image: linear-gradient(30deg,#0f0 50%,#ccc 70%,red 80%);）表明：

background-image:
- 这是一个CSS属性，用于为元素设置配景图像。
- 在这个例子中，配景图像是一个线性渐变。
linear-gradient:
- 这是一个CSS函数，用于创建线性渐变。
- 它继续多个参数来界说渐变的方向和颜色。
30deg:
- 这是渐变的角度，体现渐变线与程度线的夹角。
- 30deg 体现渐变线与程度线成30度角，从左下方向右上方渐变。
#0f0 50%:
- 这是第一个颜色停靠点。
- #0f0 是绿色的十六进制颜色代码。
- 50% 体现这个颜色在渐变的50%位置。
#ccc 70%:
- 这是第二个颜色停靠点。
- #ccc 是浅灰色的十六进制颜色代码。
- 70% 体现这个颜色在渐变的70%位置。
red 80%:
- 这是第三个颜色停靠点。
- red 是赤色。
- 80% 体现这个颜色在渐变的80%位置。

渐变过程

从出发点（0%）到50%位置：配景颜色从透明徐徐变为绿色（#0f0）。
从50%到70%位置：配景颜色从绿色（#0f0）徐徐变为浅灰色（#ccc）。
从70%到80%位置：配景颜色从浅灰色（#ccc）徐徐变为赤色（red）。
从80%到止境（100%）：配景颜色保持为赤色（red）。

效果展示

2、径向渐变

怎样明白CSS的径向渐变，以及其渐变属性

  CSS的径向渐变（Radial Gradient）是一种从中央点向外扩散的颜色过渡效果。你可以把它想象成一个圆形或椭圆形的光环，颜色从中央向边沿徐徐变革。
  平凡易懂的表明

  想象一下，你有一个光源，光线从中央向附近扩散。光线的强度和颜色在扩散过程中徐徐变革，这就是径向渐变的效果。在CSS中，你可以通过radial-gradient()函数来实现这种效果。
  渐变属性

  1. 形状（Shape）

circle：创建一个圆形渐变。
ellipse：创建一个椭圆形渐变。

2. 巨细（Size）

closest-side：渐变的止境在离中央近来的边沿。
farthest-side：渐变的止境在离中央最远的边沿。
closest-corner：渐变的止境在离中央近来的角。
farthest-corner：渐变的止境在离中央最远的角。

3. 颜色停靠点（Color Stops）

颜色停靠点是指定渐变中颜色变革的位置。
你可以界说多个颜色停靠点，每个停靠点包罗一个颜色值和一个位置值。
位置值可以是百分比（如30%）或详细的长度值（如100px）。

根本径向渐变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>径向渐变示例</title>
<style>
.box {
width: 300px;
height: 300px;
background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

复制代码

效果展示

指定形状、巨细、位置和颜色停靠点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>径向渐变示例</title>
<style>
.box {
width: 300px;
height: 200px;
background-image: radial-gradient(ellipse farthest-side at left, red 20%, yellow 40%, green 60%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

复制代码

核心代码分析

代码分析

background-image: radial-gradient(ellipse farthest-side at left, red 20%, yellow 40%, green 60%);

复制代码

background-image:
- 这是一个CSS属性，用于为元素设置配景图像。
- 在这个例子中，配景图像是一个径向渐变。
radial-gradient:
- 这是一个CSS函数，用于创建径向渐变。
- 它继续多个参数来界说渐变的形状、巨细、位置和颜色。
ellipse farthest-side at left:
- ellipse：体现渐变的形状是椭圆形。
- farthest-side：体现渐变的巨细，渐变会延伸到离中央最远的边沿。
- at left：体现渐变的中央位置在元素的左侧。
red 20%:
- 这是第一个颜色停靠点。
- red 是赤色。
- 20% 体现这个颜色在渐变的20%位置。
yellow 40%:
- 这是第二个颜色停靠点。
- yellow 是黄色。
- 40% 体现这个颜色在渐变的40%位置。
green 60%:
- 这是第三个颜色停靠点。
- green 是绿色。
- 60% 体现这个颜色在渐变的60%位置。

渐变过程

从中央（左侧）到20%位置：配景颜色从赤色（red）开始。
从20%到40%位置：配景颜色从赤色（red）徐徐变为黄色（yellow）。
从40%到60%位置：配景颜色从黄色（yellow）徐徐变为绿色（green）。
从60%到边沿：配景颜色保持为绿色（green）。

效果展示

3、重复渐变

【1】重复线性渐变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>径向渐变示例</title>
<style>
p{
width: 200px;
height: 200px;
background-image: repeating-linear-gradient(90deg,#e50743,#e8ed30,#3fa62e 20%);
/* 最后一个位置参数为20%，说明有五个充分周期，每个周期长度为边框宽度的20% */
}
</style>
</head>
<body>
<p></p>
</body>
</html>

复制代码

效果展示

【2】重复径向渐变

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>径向渐变示例</title>
<style>
p{
width: 200px;
height: 200px;
background-image: repeating-radial-gradient(circle at center, #e50743,#e8ed30,#3fa62e 20%);
/* 最后一个位置参数为20%，说明有五个充分周期，每个周期长度为边框宽度的20% */
}
</style>
</head>
<body>
<p></p>
</body>
</html>

复制代码

效果展示

4、阶段案例——感动中国人物榜

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>感动中国人物榜</title>
<link href="css/style24.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bg">
<ul>
<li class="tp"></li>
<li>彭士禄</li>
<li>杨振宁</li>
<li>顾诵芬</li>
<li>吴天一</li>
<li class="yj">朱彦夫</li>
</ul>
</div>
</body>
</html>

复制代码

CSS代码

*{margin:0; padding:0; list-style:none; outline:none;}
/*整体控制人物榜模块*/
.bg{
width:600px;
height:550px;
background-image:repeating-radial-gradient(circle at 50% 50%,#c9120a,#9e110b 1%);
margin:50px auto;
padding:40px;
border-radius:50%;
padding-top:50px;
border:10px solid #eee;
}
/*人物名字部分*/
ul{
width:372px;
height:530px;
background:#e94632;
border-radius:30px;
box-shadow:15px 15px 12px #000;
margin:0 auto;
}
ul li{
width:372px;
height:55px;
background:#da171b url(../img/huo.png) no-repeat 70px 20px;
margin-bottom:2px;
font-size:18px;
color:#fdc578;
line-height:55px;
text-align:center;
font-family:"微软雅黑";
}
/*需要单独控制的列表项*/
ul .tp{
width:372px;
height:247px;
background:#da171b;
background-image:url(../img/gandong.png),url(../img/wenzi.png);
background-repeat:no-repeat;
background-position:87px 16px,99px 192px;
border-radius:30px 30px 0 0;
}
ul .yj{border-radius:0 0 30px 30px;}

复制代码

效果展示

两张配景图片的分布位置分析（直接看结论版）：

层级关系：
- 先写的 gandong.png 像「贴纸」盖在 wenzi.png 上方（若位置重叠）
精确坐标：
- 第一张图（gandong.png）：
  - 隔断容器左侧87px
  - 隔断容器顶部16px
  - 相当于贴在容器左上地区，靠近顶部
- 第二张图（wenzi.png）：
  - 隔断容器左侧99px
  - 隔断容器顶部192px
  - 相当于贴在容器左下地区，靠近底部
直观表示图：
复制
1. ┌───────────────────────┐（容器372x247px）
2. │ 红色背景 │
3. │ │
4. │ 🖼️gandong.png │ ← 贴在(87,16)位置
5. │ │
6. │ │
7. │ │
8. │ │
9. │ 🖼️wenzi.png │ ← 贴在(99,192)位置
10. └───────────────────────┘（底部直角）
复制代码

增补提示：

现实表现效果需确保图片尺寸 ≤ 容器剩余空间（如 gandong.png 宽度应 ≤ 372-87=285px）
用欣赏器按 F12 查察元素，在样式面板拖动坐标值可及时观察图片移动

CSS学习条记5——渐变属性+盒子模子阶段案例

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

东湖之滨