背景边框与溢出
2025年3月2日大约 10 分钟
背景边框与溢出
本章将介绍如何设置元素的背景和边框，以及处理内容溢出的情况。这些属性对于创建美观的网页元素至关重要。
背景属性
CSS提供了多种控制元素背景的属性，从简单的背景颜色到复杂的背景图像和渐变。
背景颜色
background-color属性用于设置元素的背景颜色。
.box {
background-color: #f0f0f0; /* 使用十六进制值 */
background-color: rgb(240, 240, 240); /* 使用RGB值 */
background-color: rgba(240, 240, 240, 0.5); /* 带透明度的RGB */
background-color: hsl(0, 0%, 94%); /* 使用HSL值 */
background-color: transparent; /* 透明背景 */
}背景图像
background-image属性用于设置元素的背景图像。
.box {
background-image: url('image.jpg'); /* 使用图片URL */
background-image: linear-gradient(to right, red, orange); /* 线性渐变 */
background-image: radial-gradient(circle, red, blue); /* 径向渐变 */
}多重背景
CSS允许设置多个背景图像，它们会按照声明的顺序叠加（第一个在最上面）。
.box {
background-image:
url('pattern.png'),
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('background.jpg');
}背景重复
background-repeat属性控制背景图像的重复方式。
.box {
background-repeat: repeat; /* 默认值，水平和垂直方向都重复 */
background-repeat: repeat-x; /* 只在水平方向重复 */
background-repeat: repeat-y; /* 只在垂直方向重复 */
background-repeat: no-repeat; /* 不重复 */
background-repeat: space; /* 重复图像，均匀分布 */
background-repeat: round; /* 重复图像，缩放以适应空间 */
}背景位置
background-position属性设置背景图像的起始位置。
.box {
background-position: top; /* 顶部居中 */
background-position: bottom; /* 底部居中 */
background-position: left; /* 左侧居中 */
background-position: right; /* 右侧居中 */
background-position: center; /* 完全居中 */
background-position: top left; /* 左上角 */
background-position: bottom right; /* 右下角 */
background-position: 20px 50px; /* 距左20px，距上50px */
background-position: 50% 25%; /* 水平50%，垂直25% */
}背景尺寸
background-size属性控制背景图像的大小。
.box {
background-size: auto; /* 默认值，保持图像原始大小 */
background-size: cover; /* 缩放图像以完全覆盖背景区域，可能裁剪部分图像 */
background-size: contain; /* 缩放图像以完全显示，可能留有空白 */
background-size: 200px 100px; /* 宽200px，高100px */
background-size: 50% 25%; /* 宽为容器的50%，高为容器的25% */
}背景附着
background-attachment属性决定背景图像是否随页面滚动。
.box {
background-attachment: scroll; /* 默认值，背景随元素滚动 */
background-attachment: fixed; /* 背景相对于视口固定 */
background-attachment: local; /* 背景相对于元素内容滚动 */
}背景裁剪和原点
background-clip属性定义背景的绘制区域。
.box {
background-clip: border-box; /* 默认值，背景延伸到边框 */
background-clip: padding-box; /* 背景延伸到内边距 */
background-clip: content-box; /* 背景仅在内容区域内 */
}background-origin属性指定背景图像的定位区域。
.box {
background-origin: border-box; /* 背景图像相对于边框定位 */
background-origin: padding-box; /* 默认值，背景图像相对于内边距定位 */
background-origin: content-box; /* 背景图像相对于内容区域定位 */
}背景简写属性
background属性是一个简写属性，可以在一个声明中设置所有背景属性。
.box {
background: #f0f0f0 url('image.jpg') no-repeat center / cover fixed;
/* 颜色 图像 重复 位置 / 大小 附着 */
}边框属性
边框是围绕元素内容和内边距的线条。CSS提供了多种方式来自定义边框。
边框样式
border-style属性设置边框的样式。
.box {
border-style: none; /* 无边框 */
border-style: solid; /* 实线边框 */
border-style: dashed; /* 虚线边框 */
border-style: dotted; /* 点线边框 */
border-style: double; /* 双线边框 */
border-style: groove; /* 3D凹槽边框 */
border-style: ridge; /* 3D凸脊边框 */
border-style: inset; /* 3D凹入边框 */
border-style: outset; /* 3D凸出边框 */
/* 可以为四边设置不同的样式 */
border-style: solid dashed dotted double; /* 上 右 下 左 */
}边框宽度
border-width属性设置边框的宽度。
.box {
border-width: thin; /* 细边框 */
border-width: medium; /* 中等边框 */
border-width: thick; /* 粗边框 */
border-width: 2px; /* 2像素边框 */
/* 可以为四边设置不同的宽度 */
border-width: 1px 2px 3px 4px; /* 上 右 下 左 */
}边框颜色
border-color属性设置边框的颜色。
.box {
border-color: red;
border-color: #00ff00;
border-color: rgb(0, 0, 255);
/* 可以为四边设置不同的颜色 */
border-color: red green blue yellow; /* 上 右 下 左 */
}单边边框
可以单独设置元素的某一边的边框。
.box {
border-top: 1px solid red;
border-right: 2px dashed green;
border-bottom: 3px dotted blue;
border-left: 4px double yellow;
}边框简写属性
border属性是一个简写属性，可以在一个声明中设置所有边框属性。
.box {
border: 1px solid black;
/* 宽度 样式 颜色 */
}圆角边框
border-radius属性用于创建圆角边框。
.box {
border-radius: 5px; /* 所有角都是5px的圆角 */
/* 可以为四个角设置不同的半径 */
border-radius: 5px 10px 15px 20px; /* 左上 右上 右下 左下 */
/* 创建椭圆角 */
border-radius: 10px / 20px; /* 水平半径10px，垂直半径20px */
/* 创建圆形或椭圆 */
border-radius: 50%;
}图像边框
border-image属性允许使用图像作为边框。
.box {
border-image-source: url('border.png'); /* 边框图像源 */
border-image-slice: 27; /* 图像切片 */
border-image-width: 20px; /* 边框宽度 */
border-image-outset: 0; /* 边框图像区域超出边框的量 */
border-image-repeat: round; /* 图像重复方式 */
/* 简写形式 */
border-image: url('border.png') 27 / 20px round;
}轮廓属性
轮廓（outline）是绘制在元素边框外的线条，不占用空间。
.box {
outline-style: solid;
outline-width: 2px;
outline-color: red;
/* 简写形式 */
outline: 2px solid red;
/* 轮廓偏移 */
outline-offset: 5px; /* 轮廓与边框之间的距离 */
}轮廓与边框的主要区别：
- 轮廓不占用空间
- 轮廓可能不是矩形
- 轮廓不能单独设置各边
内容溢出
当内容超出元素的尺寸限制时，可以使用overflow属性控制其行为。
overflow属性
.box {
overflow: visible; /* 默认值，内容不会被裁剪，会溢出元素 */
overflow: hidden; /* 内容会被裁剪，不显示溢出部分 */
overflow: scroll; /* 添加滚动条，无论是否需要 */
overflow: auto; /* 仅在需要时添加滚动条 */
}单方向溢出
可以单独控制水平和垂直方向的溢出行为。
.box {
overflow-x: hidden; /* 水平方向溢出隐藏 */
overflow-y: scroll; /* 垂直方向显示滚动条 */
}文本溢出
text-overflow属性专门用于控制文本溢出时的行为。
.box {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出内容 */
text-overflow: ellipsis; /* 使用省略号表示溢出文本 */
}多行文本溢出（使用WebKit浏览器特有属性）：
.box {
display: -webkit-box;
-webkit-line-clamp: 3; /* 显示的行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}实例：综合运用背景、边框和溢出
<!DOCTYPE html>
<html>
<head>
<title>背景、边框与溢出示例</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.card {
width: 300px;
height: 400px;
margin: 20px;
float: left;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card-header {
height: 200px;
background-image: linear-gradient(to bottom right, #5f2c82, #49a09d);
background-size: cover;
background-position: center;
border-bottom: 5px solid #333;
}
.card-image {
height: 200px;
background-image: url('https://via.placeholder.com/300x200');
background-size: cover;
background-position: center;
border-bottom: 5px solid #333;
}
.card-content {
padding: 15px;
height: 150px;
overflow: auto;
}
.card-title {
font-size: 1.5em;
margin-bottom: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fancy-border {
border: 10px solid transparent;
border-image: linear-gradient(to bottom right, red, blue) 1;
padding: 15px;
margin: 20px;
clear: both;
}
.text-overflow-demo {
width: 200px;
padding: 10px;
margin: 20px;
border: 1px solid #ddd;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.multi-line-overflow {
width: 200px;
padding: 10px;
margin: 20px;
border: 1px solid #ddd;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="container">
<h1>背景、边框与溢出示例</h1>
<div class="card">
<div class="card-header"></div>
<div class="card-content">
<h2 class="card-title">渐变背景卡片</h2>
<p>这个卡片使用了线性渐变作为背景。内容区域设置了固定高度和溢出滚动。</p>
<p>当内容超出区域时，会显示滚动条。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.</p>
</div>
</div>
<div class="card">
<div class="card-image"></div>
<div class="card-content">
<h2 class="card-title">图像背景卡片标题可能很长很长很长很长很长很长</h2>
<p>这个卡片使用了图像作为背景。标题使用了单行文本溢出处理，显示省略号。</p>
</div>
</div>
<div class="fancy-border">
<h2>渐变边框</h2>
<p>这个元素使用了渐变作为边框图像。</p>
</div>
<div class="text-overflow-demo">
这是一个很长的文本，会溢出容器，使用省略号表示被截断的内容。
</div>
<div class="multi-line-overflow">
这是一个多行文本溢出的示例。文本将被限制为最多显示3行，超出部分将被截断并显示省略号。这是一个很长的段落，包含了足够多的文本来演示多行溢出效果。
</div>
</div>
</body>
</html>阴影效果
CSS提供了两种主要的阴影属性：box-shadow用于元素阴影，text-shadow用于文本阴影。
盒子阴影
box-shadow属性为元素添加一个或多个阴影效果。
.box {
/* 基本语法: x偏移 y偏移 模糊半径 扩散半径 颜色 */
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.3);
/* 内阴影 */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
/* 多重阴影 */
box-shadow:
0 5px 10px rgba(0, 0, 0, 0.3),
0 0 5px rgba(0, 0, 255, 0.5);
}文本阴影
text-shadow属性为文本添加阴影效果。
.text {
/* 基本语法: x偏移 y偏移 模糊半径 颜色 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
/* 多重阴影 */
text-shadow:
1px 1px 2px black,
0 0 10px blue;
/* 发光效果 */
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6;
}背景与边框的创意应用
条纹背景
使用线性渐变创建条纹背景：
.stripes {
background: linear-gradient(
45deg,
#f2f2f2 25%,
#e6e6e6 25%,
#e6e6e6 50%,
#f2f2f2 50%,
#f2f2f2 75%,
#e6e6e6 75%
);
background-size: 40px 40px;
}棋盘格背景
使用多重线性渐变创建棋盘格背景：
.checkerboard {
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px 0, 10px 10px;
}多边形边框
使用clip-path属性创建多边形形状：
.polygon {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background-color: #3498db;
padding: 20px;
}总结
在本章中，我们学习了：
背景属性及其用法
- 背景颜色、图像、渐变
- 背景位置、尺寸、重复方式
- 背景附着、裁剪和原点
边框属性及其用法
- 边框样式、宽度、颜色
- 圆角边框
- 图像边框
轮廓属性
- 轮廓与边框的区别
内容溢出处理
- overflow属性
- 文本溢出处理
阴影效果
- 盒子阴影
- 文本阴影
这些属性为网页设计提供了丰富的视觉效果，可以创建出美观、专业的用户界面。
练习
- 创建一个带有渐变背景、圆角和阴影的卡片
- 实现一个带有自定义边框图像的容器
- 创建一个文本溢出显示省略号的标题
- 设计一个带有条纹背景的元素
- 实现一个内容可滚动的固定高度容器