【前端开发之CSS】（四）CSS 常用元素属性宝典（下）：背景与圆角进阶指南，让页面颜值飙升！

_OP_CHEN

发布于 2026-01-29 12:04:58

270

文章被收录于专栏：C++C++

前言

在 CSS 的世界里，想要打造出视觉惊艳、细节精致的网页，背景属性和圆角设计绝对是 “点睛之笔”。它们看似基础，却能通过灵活组合实现从简约清新到炫酷高级的多种风格，是前端开发者必须熟练掌握的核心技能。上一篇我们聊了字体、文本等基础属性，这篇就聚焦背景属性和圆角矩形，从基础用法到进阶技巧，再到实战案例，带你全方位解锁 CSS 的 “颜值魔法”！下面就让我们正式开始吧！

一、背景属性：给页面穿上 “华丽外衣”

背景是网页的 “底色”，直接影响整体视觉基调。CSS 的背景属性家族十分强大，不仅能设置纯色背景，还能添加背景图片、控制平铺方式、调整位置和尺寸，甚至实现多重背景叠加。掌握这些属性，就能告别单调的白色背景，让网页瞬间鲜活起来。

1.1 背景颜色（background-color）：基础中的基础

背景颜色是最常用的背景属性，用于设置元素的纯色背景，默认值为transparent（透明），也就是说元素默认会继承父元素的背景。

1.1.1 颜色值的三种常用写法

CSS 中设置颜色有三种核心方式，各有适用场景，在上期博客中已经为大家详细介绍过了，这里我们再结合实际开发场景详细说明一下：

预定义颜色值（单词形式）：直接使用英文颜色名称，比如red（红色）、blue（蓝色）、green（绿色）等。这种方式简单直观，适合快速设置常见颜色，但颜色种类有限，无法满足精细的配色需求。

.bgc-demo1 {
  background-color: red; /* 红色背景 */
}
.bgc-demo2 {
  background-color: skyblue; /* 天蓝色背景 */
}

十六进制形式（最常用）：通过#后跟 6 位十六进制数（00-FF）表示，每两位分别对应 R（红）、G（绿）、B（蓝）三色分量。这种方式颜色范围极广，是开发中最常用的配色方式。如果十六进制数中两两相同，还可以简写为 3 位，比如#ff0000可简写为#f00，#ffff00可简写为#ff0。

.bgc-demo3 {
  background-color: #ff0000; /* 红色，等同于red */
}
.bgc-demo4 {
  background-color: #f3f3f3; /* 浅灰色，常用于页面背景 */
}
.bgc-demo5 {
  background-color: #0f0; /* 绿色，简写形式 */
}

RGB/RGBA 形式：通过rgb()函数指定红、绿、蓝三色分量的数值（0-255），比如rgb(255, 0, 0)对应红色。RGBA 在 RGB 的基础上增加了透明度参数（0-1），rgba(255, 0, 0, 0.5)表示半透明红色，适合需要叠加效果的场景。

.bgc-demo6 {
  background-color: rgb(255, 165, 0); /* 橙色 */
}
.bgc-demo7 {
  background-color: rgba(0, 0, 255, 0.3); /* 半透明蓝色 */
}

1.1.2 实战技巧：页面背景色设置

在实际开发中，我们常给body标签设置浅灰色背景，让页面内容与背景形成区分，提升可读性：

body {
  background-color: #f5f5f5; /* 浅灰色背景，避免纯白刺眼 */
}

同时，透明背景transparent也很常用，比如某些弹窗组件需要透过背景看到下层内容：

.modal {
  background-color: transparent; /* 透明背景 */
  border: 1px solid #eee;
  padding: 20px;
}

1.2 背景图片（background-image）：让背景更有层次感

背景图片能让页面更具设计感，通过background-image属性设置，语法为background-image: url(图片路径)。

1.2.1 图片路径的写法

相对路径：相对于当前 CSS 文件或 HTML 文件的路径，比如图片与 CSS 文件在同一目录下，直接写图片名称url(rose.jpg)；图片在上级目录则写url(../images/rose.jpg)。
绝对路径：完整的图片 URL，比如url(https://example.com/images/rose.jpg)，适合引用网络图片。
路径引号：URL 可以加引号（单引号或双引号），也可以不加，推荐加上引号提高可读性。

1.2.2 基础用法示例

.bgi-demo {
  width: 800px;
  height: 500px; /* 必须设置高度，否则元素高度为0，背景图片无法显示 */
  background-image: url("rose.jpg"); /* 背景图片 */
}

⚠️ 注意：背景图片默认会覆盖在背景颜色上方，如果图片有透明区域，会显示出下方的背景颜色。如果只设置背景图片而不设置元素高度，元素会被内容撑开（若没有内容则高度为 0），导致背景图片无法显示，因此务必给元素指定高度或确保元素有足够内容。

1.3 背景平铺（background-repeat）：控制图片重复方式

背景图片默认会在水平和垂直方向上平铺（repeat），当图片尺寸小于元素尺寸时，会重复显示以填满元素。通过background-repeat可以控制平铺方式，常用取值如下：

repeat：默认值，水平和垂直方向都平铺。
no-repeat：不平铺，只显示一张图片。
repeat-x：只在水平方向平铺。
repeat-y：只在垂直方向平铺。

1.3.1 各取值示例

/* 不平铺，只显示一张图片 */
.bgr-demo1 {
  width: 800px;
  height: 500px;
  background-image: url("rose.jpg");
  background-repeat: no-repeat;
  background-color: #f0f0f0; /* 背景颜色与图片叠加 */
}

/* 水平平铺 */
.bgr-demo2 {
  width: 800px;
  height: 200px;
  background-image: url("icon.png");
  background-repeat: repeat-x;
  background-color: #eee;
}

/* 垂直平铺 */
.bgr-demo3 {
  width: 300px;
  height: 500px;
  background-image: url("line.png");
  background-repeat: repeat-y;
  background-color: #fff;
}

1.3.2 实战场景：用平铺实现纹理背景

在开发中，我们常使用小尺寸的纹理图片（比如木纹、布纹、渐变条纹）通过平铺实现大面积的背景效果，既节省图片资源，又能让背景更有质感：

.wooden-bg {
  width: 100%;
  height: 600px;
  background-image: url("wood-texture.jpg"); /* 小尺寸木纹图片 */
  background-repeat: repeat; /* 平铺填充整个元素 */
}

1.4 背景位置（background-position）：精准控制图片位置

当背景图片不平铺时，background-position属性可以控制图片在元素中的位置，参数支持方位名词、精确单位、混合单位三种形式，灵活度极高。

1.4.1 参数写法详解

方位名词：top（上）、bottom（下）、left（左）、right（右）、center（中），可以组合使用（比如top left、center right），顺序无关。
- 若只指定一个方位名词，另一个默认居中（比如left等同于left center，top等同于center top）。
精确单位：可以是像素（px）、百分比（%）等，以元素左上角为原点（0,0），第一个值为水平方向（x 轴），第二个值为垂直方向（y 轴）。
- 比如background-position: 50px 100px表示图片左上角距离元素左边界 50px，距离上边界 100px。
- 百分比是相对于元素和图片的尺寸差计算的，比如background-position: 50% 50%表示图片中心与元素中心对齐（等同于center center）。
混合单位：同时包含方位名词和精确单位，第一个值为水平方向，第二个值为垂直方向。
- 比如background-position: 20px center表示水平方向距离左边界 20px，垂直方向居中；background-position: right 30px bottom 40px表示距离右边界 30px，距离下边界 40px。

1.4.2 常用示例

/* 居中显示（最常用） */
.bgp-demo1 {
  width: 800px;
  height: 500px;
  background-image: url("rose.jpg");
  background-repeat: no-repeat;
  background-position: center; /* 等同于 center center */
  background-color: purple;
}

/* 左上角显示 */
.bgp-demo2 {
  width: 800px;
  height: 500px;
  background-image: url("rose.jpg");
  background-repeat: no-repeat;
  background-position: top left; /* 等同于 left top */
}

/* 精确位置控制 */
.bgp-demo3 {
  width: 800px;
  height: 500px;
  background-image: url("rose.jpg");
  background-repeat: no-repeat;
  background-position: 100px 150px; /* 水平100px，垂直150px */
}

/* 混合单位控制 */
.bgp-demo4 {
  width: 800px;
  height: 500px;
  background-image: url("rose.jpg");
  background-repeat: no-repeat;
  background-position: right 50px center; /* 距离右边界50px，垂直居中 */
}

1.4.3 实战技巧：图标定位

在制作网页图标（比如按钮中的小图标）时，常使用background-position精准控制图标位置，配合no-repeat实现图标与文字的搭配：

.btn {
  display: inline-block;
  padding: 10px 20px 10px 40px; /* 左侧预留图标空间 */
  background-image: url("icon-search.png");
  background-repeat: no-repeat;
  background-position: 15px center; /* 图标在左侧15px，垂直居中 */
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

1.5 背景尺寸（background-size）：灵活调整图片大小

background-size属性用于控制背景图片的尺寸，解决图片尺寸与元素尺寸不匹配的问题，支持具体数值、百分比、关键字三种写法。

1.5.1 参数详解

具体数值：直接指定图片的宽度和高度，比如background-size: 400px 300px表示图片宽 400px、高 300px（可能会导致图片变形，需谨慎使用）。
百分比：相对于父元素的宽度和高度计算，比如background-size: 100% 50%表示图片宽度占父元素 100%，高度占父元素 50%。
关键字：
- cover：将图片扩展至足够大，使图片完全覆盖元素背景区域，可能会导致图片部分区域被裁剪（不改变图片比例）。
- contain：将图片扩展至最大尺寸，使图片宽度和高度完全适应元素背景区域，不会裁剪图片（不改变图片比例，可能会留下空白）。
- auto：默认值，保持图片原始尺寸。

1.5.2 常用示例

/* 具体数值（可能变形） */
.bgs-demo1 {
  width: 800px;
  height: 500px;
  background-image: url("rose.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 800px 500px; /* 图片完全填充元素，可能变形 */
}

/* cover：完全覆盖（可能裁剪） */
.bgs-demo2 {
  width: 800px;
  height: 500px;
  background-image: url("rose.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* 覆盖整个元素，多余部分裁剪 */
}

/* contain：完全适应（可能留空白） */
.bgs-demo3 {
  width: 800px;
  height: 500px;
  background-image: url("rose.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* 适应元素，不裁剪，可能留空白 */
}

/* 宽度100%，高度自动（保持比例） */
.bgs-demo4 {
  width: 800px;
  height: 500px;
  background-image: url("rose.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto; /* 宽度铺满，高度自动适应 */
}

1.5.3 cover 与 contain 的核心区别（实战必懂）

很多开发者在使用cover和contain时容易混淆，我们用表格清晰对比：

关键字	核心特点	适用场景
cover	完全覆盖元素，可能裁剪图片	背景图需要铺满元素，不介意裁剪（比如页面 banner、卡片背景）
contain	完全适应元素，不裁剪图片	背景图需要完整显示，不介意留空白（比如 logo 背景、产品图片展示）

示例对比：

/* cover示例：banner背景，铺满无空白 */
.banner {
  width: 100%;
  height: 400px;
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* contain示例：产品图片展示，完整显示 */
.product-img {
  width: 300px;
  height: 300px;
  background-image: url("product.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: #f5f5f5;
}

1.6 背景复合写法：简化代码

为了提高开发效率，CSS 支持将背景相关属性合并为一个background属性，顺序无严格要求，但建议遵循 “颜色→图片→平铺→位置→尺寸” 的顺序（尺寸需要跟在位置后面，用/分隔）。

1.6.1 复合写法语法

background: 背景颜色 背景图片 背景平铺 背景位置 / 背景尺寸;

1.6.2 示例对比

分开写法：

.bg-complex {
  width: 800px;
  height: 500px;
  background-color: #f0f0f0;
  background-image: url("rose.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

复合写法（简化后）：

.bg-complex {
  width: 800px;
  height: 500px;
  background: #f0f0f0 url("rose.jpg") no-repeat center / cover;
}

⚠️ 注意：background-size必须跟在background-position后面，用/分隔，这是复合写法的固定规则，否则会失效。

1.7 多重背景：叠加出高级效果

CSS 支持给一个元素设置多个背景图片，用逗号分隔各个背景的属性值，实现叠加效果。多个背景的层级关系为：第一个背景在最上层，最后一个背景在最下层。

1.7.1 基础用法

.multi-bg {
  width: 800px;
  height: 500px;
  /* 多重背景：上层图片 + 下层渐变背景 */
  background: 
    url("logo.png") no-repeat center, /* 上层：logo居中 */
    linear-gradient(to bottom, #007bff, #6610f2); /* 下层：渐变背景 */
}

1.7.2 实战案例：带水印的背景

在开发中，我们常需要给背景添加水印（比如公司 logo、“草稿” 字样），使用多重背景可以轻松实现，无需额外添加元素：

.watermark-bg {
  width: 100%;
  height: 600px;
  /* 背景：底层纯色 + 中层纹理 + 上层水印 */
  background: 
    url("watermark.png") no-repeat center rgba(255, 255, 255, 0.3), /* 水印（半透明） */
    url("texture.png") repeat, /* 纹理背景 */
    #f8f9fa; /* 底层纯色 */
}

1.8 背景附着（background-attachment）：控制背景滚动方式

background-attachment属性用于控制背景图片是否跟随页面滚动，常用取值有scroll（默认）、fixed、local。

1.8.1 取值详解

scroll：背景图片跟随元素滚动，当页面滚动时，背景图片会相对于元素移动。
fixed：背景图片固定在浏览器窗口中，不跟随页面或元素滚动，相当于 “冻结” 在屏幕上。
local：背景图片跟随元素内容滚动（比如元素有滚动条时，背景会跟着内容一起滚动）。

1.8.2 常用示例（视差滚动效果）

background-attachment: fixed是实现视差滚动效果的关键属性，让背景图片与前景内容滚动速度不同，营造出立体层次感：

.parallax-section {
  height: 600px;
  background-image: url("mountain.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed; /* 背景固定，实现视差效果 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-text {
  font-size: 48px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

HTML 结构：

<section class="parallax-section">
  <h2 class="parallax-text">视差滚动效果</h2>
</section>
<div style="height: 800px; background-color: #fff; padding: 50px;">
  <p>这里是普通内容区域...</p>
</div>
<section class="parallax-section">
  <h2 class="parallax-text">第二张视差背景</h2>
</section>

当滚动页面时，背景图片固定不动，前景内容滚动，形成强烈的视觉冲击。

二、圆角矩形（border-radius）：告别尖锐，拥抱柔和

在 Web 设计中，圆角是提升页面质感的 “小细节”，能让尖锐的矩形边缘变得柔和，给人更舒适的视觉体验。CSS 的border-radius属性不仅能实现简单的圆角，还能创建圆形、椭圆形，甚至不规则的圆角效果，是现代 UI 设计的必备属性。

2.1 基础用法：简单圆角

border-radius属性用于设置元素边框的圆角半径，数值越大，圆角越明显。它的基础语法非常简单，支持具体数值（px、em 等）和百分比。

2.1.1 基本语法

/* 所有角统一设置圆角 */
border-radius: 数值;

2.1.2 示例：按钮圆角

按钮是圆角最常用的场景之一，通过border-radius可以让按钮从 “方方正正” 变得更圆润：

.btn-rounded {
  padding: 12px 24px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 8px; /* 8px圆角，适中大小 */
  font-size: 16px;
  cursor: pointer;
}

.btn-rounded:hover {
  background-color: #0056b3;
}

HTML 结构：

<button class="btn-rounded">点击按钮</button>

效果：按钮四个角都变成 8px 半径的圆角，hover 时颜色加深，交互体验更佳。

2.1.3 数值与效果的关系

border-radius的数值决定了圆角的 “弧度”，我们用表格展示不同数值的效果：

数值	效果描述	适用场景
2-4px	轻微圆角，几乎不明显	卡片、输入框等需要轻微优化的元素
8-16px	适中圆角，视觉舒适	按钮、弹窗、卡片等核心交互元素
20px 以上	大圆角，风格鲜明	特殊设计的组件、头像框等

2.2 进阶用法：分别控制四个角

border-radius支持分别控制元素的四个角（上左、上右、下右、下左），有两种写法：缩写写法和展开写法。

2.2.1 缩写写法（顺时针顺序）

border-radius的缩写遵循 “顺时针” 规则，从左上角开始，依次为：上左、上右、下右、下左，具体分为四种情况：

1 个值：border-radius: 10px → 四个角都是 10px 圆角。
2 个值：border-radius: 10px 20px → 上左、下右为 10px；上右、下左为 20px。
3 个值：border-radius: 10px 20px 30px → 上左为 10px；上右、下左为 20px；下右为 30px。
4 个值：border-radius: 10px 20px 30px 40px → 上左 10px、上右 20px、下右 30px、下左 40px（顺时针顺序）。

2.2.2 展开写法（精准控制）

如果需要更精准地控制单个角，可以使用展开属性，每个角对应一个属性：

上左角：border-top-left-radius
上右角：border-top-right-radius
下右角：border-bottom-right-radius
下左角：border-bottom-left-radius

2.2.3 示例：不规则圆角

通过缩写或展开写法，可以实现不规则的圆角效果，让元素更有设计感：

/* 缩写写法：四个角不同圆角 */
.irregular-radius1 {
  width: 300px;
  height: 200px;
  background-color: #ff7f50;
  border-radius: 10px 30px 50px 70px; /* 上左10px、上右30px、下右50px、下左70px */
}

/* 展开写法：只给左上角和右下角设置圆角 */
.irregular-radius2 {
  width: 300px;
  height: 200px;
  background-color: #9370db;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

2.3 高级用法：创建圆形和椭圆形

border-radius不仅能实现圆角矩形，还能轻松创建圆形和椭圆形，关键在于控制元素的宽高比和圆角半径。

2.3.1 创建圆形

要创建圆形，需要满足两个条件：

元素的宽度和高度相等（正方形）。
border-radius的值为元素宽度（或高度）的一半，或直接设置为50%。

示例：圆形头像

.avatar-circle {
  width: 150px;
  height: 150px; /* 宽高相等，正方形 */
  background-image: url("avatar.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%; /* 50%圆角，变成圆形 */
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

HTML 结构：

<div class="avatar-circle"></div>

效果：正方形元素变成完美的圆形，适合作为用户头像、图标等。

2.3.2 创建椭圆形

要创建椭圆形，需要满足两个条件：

元素的宽度和高度不相等（长方形）。
border-radius的值为元素宽度和高度的一半，或直接设置为50%。

示例：椭圆形 banner

.oval-demo {
  width: 400px;
  height: 200px; /* 宽高不等，长方形 */
  background-color: #20c997;
  border-radius: 50%; /* 50%圆角，变成椭圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
}

HTML 结构：

<div class="oval-demo">椭圆形元素</div>

效果：长方形元素变成椭圆形，适合作为特殊装饰、标签等。

2.4 特殊用法：圆角与边框、阴影的搭配

border-radius可以与border（边框）、box-shadow（阴影）完美搭配，让元素更有层次感，需要注意的是：边框和阴影会跟随圆角一起显示，不会出现 “直角边框 + 圆角阴影” 的冲突。

2.4.1 圆角 + 边框

.border-radius-with-border {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 2px solid #007bff;
  border-radius: 12px; /* 圆角会作用于边框 */
  padding: 20px;
}

2.4.2 圆角 + 阴影

.border-radius-with-shadow {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* 阴影会跟随圆角 */
  padding: 20px;
}

2.4.3 实战案例：卡片组件

将圆角、边框、阴影、背景结合，打造一个精美的卡片组件：

.card {
  width: 350px;
  background-color: #fff;
  border-radius: 16px; /* 大圆角，更显高级 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden; /* 让图片圆角与卡片一致 */
}

.card-img {
  width: 100%;
  height: 200px;
  background-image: url("card-img.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.card-content {
  padding: 24px;
}

.card-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 8px;
}

.card-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}

.card-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
}

HTML 结构：

<div class="card">
  <div class="card-img"></div>
  <div class="card-content">
    <h3 class="card-title">卡片标题</h3>
    <p class="card-desc">这是一张精美的卡片组件，结合了圆角、阴影、背景等属性，视觉效果更佳。</p>
    <a href="#" class="card-btn">查看详情</a>
  </div>
</div>

效果：卡片整体有柔和的圆角和轻微阴影，图片部分铺满顶部，内容区域间距合理，是现代网页中常见的组件样式。

2.5 注意事项：避免常见坑

在使用border-radius时，有几个常见问题需要注意，避免出现不符合预期的效果：

2.5.1 边框和内边距对圆角的影响

当元素设置了border或padding时，border-radius的圆角半径是相对于元素的 “外边界” 计算的，边框会跟随圆角显示，内边距不会影响圆角形状，但会影响内容与圆角的距离。

示例：

.demo-padding {
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 2px solid #ff7f50;
  border-radius: 12px;
  padding: 20px; /* 内容与边框有20px距离，圆角不受影响 */
}

2.5.2 背景图片与圆角的冲突

如果元素设置了背景图片，且图片需要跟随圆角显示（不超出圆角范围），需要给元素添加overflow: hidden属性，否则图片会超出圆角，显示为直角。

示例：

.bg-with-radius {
  width: 300px;
  height: 200px;
  background-image: url("rose.jpg");
  background-size: cover;
  border-radius: 12px;
  overflow: hidden; /* 隐藏超出圆角的图片部分 */
}

2.5.3 百分比数值的注意事项

当border-radius使用百分比时，圆角半径是相对于元素的宽度和高度计算的，比如border-radius: 50%会让元素变成圆形（宽高相等）或椭圆形（宽高不等），而border-radius: 10%则表示圆角半径为元素宽度的 10%（水平方向）和高度的 10%（垂直方向）。

示例：

.percent-radius {
  width: 400px;
  height: 200px;
  background-color: #9370db;
  border-radius: 10%; /* 水平圆角40px（400px*10%），垂直圆角20px（200px*10%） */
}

三、实战综合案例：打造高颜值登录页面

为了让大家更好地掌握背景属性和圆角矩形的综合运用，我们来打造一个高颜值的登录页面，融合前面所学的所有核心知识点：

3.1 页面效果描述

背景：使用渐变色 + 纹理图片的多重背景，实现高级质感。
登录卡片：居中显示，带有圆角和阴影，内部包含输入框、按钮等元素。
输入框：轻微圆角，聚焦时边框变色。
按钮：大圆角，hover 时有颜色变化。
头像：圆形设计，位于卡片顶部居中。

3.2 完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高颜值登录页面</title>
  <style>
    /* 重置浏览器默认样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Microsoft YaHei', sans-serif;
      /* 多重背景：渐变+纹理 */
      background: 
        url("texture.png") repeat,
        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 登录卡片 */
    .login-card {
      width: 400px;
      background-color: #fff;
      border-radius: 20px; /* 大圆角，柔和视觉 */
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      padding: 40px 30px;
      position: relative;
    }

    /* 圆形头像 */
    .login-avatar {
      width: 100px;
      height: 100px;
      background-image: url("avatar-default.jpg");
      background-size: cover;
      background-position: center;
      border-radius: 50%; /* 圆形 */
      border: 5px solid #f5f5f5;
      position: absolute;
      top: -50px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .login-title {
      text-align: center;
      margin: 20px 0 30px;
      color: #333;
      font-size: 24px;
    }

    /* 输入框组 */
    .input-group {
      margin-bottom: 25px;
    }

    .input-group label {
      display: block;
      margin-bottom: 8px;
      color: #666;
      font-size: 14px;
    }

    .input-group input {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid #ddd;
      border-radius: 8px; /* 输入框圆角 */
      font-size: 16px;
      transition: border-color 0.3s ease;
    }

    .input-group input:focus {
      outline: none;
      border-color: #667eea; /* 聚焦时边框变色 */
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }

    /* 登录按钮 */
    .login-btn {
      width: 100%;
      padding: 14px;
      background-color: #667eea;
      color: #fff;
      border: none;
      border-radius: 30px; /* 大圆角按钮 */
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .login-btn:hover {
      background-color: #5a6edb; /* hover时颜色加深 */
    }

    /* 底部链接 */
    .login-links {
      text-align: center;
      margin-top: 20px;
    }

    .login-links a {
      color: #667eea;
      text-decoration: none;
      font-size: 14px;
      margin: 0 10px;
    }

    .login-links a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div class="login-card">
    <div class="login-avatar"></div>
    <h2 class="login-title">欢迎登录</h2>
    <div class="input-group">
      <label for="username">用户名</label>
      <input type="text" id="username" placeholder="请输入用户名">
    </div>
    <div class="input-group">
      <label for="password">密码</label>
      <input type="password" id="password" placeholder="请输入密码">
    </div>
    <button class="login-btn">登录</button>
    <div class="login-links">
      <a href="#">忘记密码？</a>
      <a href="#">注册账号</a>
    </div>
  </div>
</body>
</html>

运行效果如下：

3.3 代码解析

背景设计：使用linear-gradient创建渐变背景，叠加texture.png纹理图片，通过repeat平铺，让背景更有质感，避免单调。
登录卡片：使用border-radius: 20px创建大圆角，配合box-shadow添加阴影，提升立体感；通过position: relative和绝对定位实现头像在卡片顶部居中。
圆形头像：宽高相等（100px），border-radius: 50%变成圆形，添加边框和阴影，让头像更突出。
输入框：border-radius: 8px轻微圆角，聚焦时通过transition实现边框颜色平滑过渡，提升交互体验。
登录按钮：border-radius: 30px大圆角，hover 时颜色加深，符合现代 UI 设计风格。

总结

背景属性和圆角矩形看似简单，但通过灵活组合和细节调整，能让网页的视觉效果提升一个档次。希望这篇文章能帮助你全面掌握这些属性的用法，在实际开发中打造出更精美的网页！如果有任何问题或疑问，欢迎在评论区留言交流～

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-01-26，如有侵权请联系 cloudcommunity@tencent.com 删除

设计

css

background

基础

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！