CSS 背景与边框

背景和边框是 CSS 中最常用的样式属性之一。通过背景属性可以为元素添加颜色、图片、渐变等效果，边框属性则可以定义元素的边界样式。这一章将详细介绍这两个主题。

背景属性

background-color 背景颜色

background-color 设置元素的背景颜色：

.box {
    background-color: #f5f5f5;
}

.header {
    background-color: rgba(52, 152, 219, 0.9);
}

.transparent {
    background-color: transparent;  /* 透明 */
}

背景颜色会填充元素的内容区、内边距区，但不包括外边距区。

background-image 背景图片

background-image 为元素设置背景图片：

.hero {
    background-image: url('hero-bg.jpg');
}

背景图片默认从元素左上角开始平铺，覆盖整个内容区和内边距区。

可以同时设置背景颜色和背景图片，颜色会显示在图片下方：

.hero {
    background-color: #333;
    background-image: url('hero-bg.jpg');
}

background-repeat 背景平铺

background-repeat 控制背景图片的平铺方式：

.no-repeat {
    background-repeat: no-repeat;  /* 不平铺 */
}

.repeat-x {
    background-repeat: repeat-x;   /* 水平平铺 */
}

.repeat-y {
    background-repeat: repeat-y;   /* 垂直平铺 */
}

.repeat {
    background-repeat: repeat;     /* 双向平铺（默认） */
}

/* 双值语法 */
.custom {
    background-repeat: repeat no-repeat;  /* 水平重复，垂直不重复 */
}

/* 其他值 */
.space {
    background-repeat: space;  /* 平铺且不裁剪，用空白填充 */
}

.round {
    background-repeat: round;  /* 平铺且不裁剪，拉伸图片 */
}

background-position 背景位置

background-position 控制背景图片的位置：

/* 关键字 */
.center { background-position: center; }
.top { background-position: top; }
.bottom-right { background-position: bottom right; }

/* 像素值 */
.pixel { background-position: 20px 30px; }  /* 水平20px，垂直30px */

/* 百分比 */
.percent { background-position: 50% 50%; }  /* 等同于 center */

/* 混合使用 */
.mixed { background-position: center 20px; }

百分比定位的原理是：图片的百分比点与容器的百分比点对齐。50% 50% 表示图片的 50% 点与容器的 50% 点对齐，即居中。

background-size 背景尺寸

background-size 控制背景图片的尺寸：

/* 关键字 */
.auto { background-size: auto; }       /* 原始尺寸 */
.cover { background-size: cover; }     /* 覆盖容器，可能裁剪 */
.contain { background-size: contain; } /* 包含在容器内，可能留白 */

/* 具体尺寸 */
.fixed { background-size: 200px 100px; }

/* 百分比 */
.percent { background-size: 100% auto; }  /* 宽度100%，高度自动 */

cover 是最常用的值，它确保背景图片覆盖整个容器，同时保持图片比例。当容器比例与图片比例不同时，图片会被裁剪。

contain 确保整张图片可见，图片会缩放到完全包含在容器内。当容器比例与图片比例不同时，会有留白区域。

background-attachment 背景附着

background-attachment 控制背景图片是否随页面滚动：

.scroll { background-attachment: scroll; }  /* 随页面滚动（默认） */
.fixed { background-attachment: fixed; }    /* 固定不动 */
.local { background-attachment: local; }    /* 随元素内容滚动 */

fixed 常用于创建视差滚动效果，背景图片固定在视口中，不随页面滚动。

background-origin 背景原点

background-origin 指定背景定位的原点区域：

.padding-box { background-origin: padding-box; }  /* 从内边距开始（默认） */
.border-box { background-origin: border-box; }    /* 从边框开始 */
.content-box { background-origin: content-box; }  /* 从内容区开始 */

这个属性影响 background-position 的参考区域。

background-clip 背景裁剪

background-clip 指定背景的绘制区域：

.border-box { background-clip: border-box; }    /* 绘制到边框（默认） */
.padding-box { background-clip: padding-box; }  /* 绘制到内边距 */
.content-box { background-clip: content-box; }  /* 只绘制内容区 */
.text { background-clip: text; }                /* 只绘制文字区域 */

background-clip: text 可以创建文字背景效果：

.text-gradient {
    background: linear-gradient(90deg, #3498db, #e74c3c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

background 简写属性

background 属性可以简写所有背景属性：

.hero {
    background: #333 url('hero.jpg') no-repeat center center / cover;
    /* 格式：
       background-color background-image background-repeat 
       background-position / background-size background-attachment
    */
}

注意 background-position 和 background-size 之间用 / 分隔。

多重背景

CSS 支持为元素设置多个背景层，从前往后叠加：

.multi-bg {
    background: 
        url('overlay.png') no-repeat center,
        url('texture.png') repeat,
        linear-gradient(#333, #666);
}

多个背景用逗号分隔，第一个背景在最上层。常用的场景是在背景图片上叠加渐变遮罩：

.hero {
    background: 
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        url('hero.jpg') center / cover;
}

CSS 渐变

CSS 渐变是一种特殊的图片类型，可以在两个或多个颜色之间创建平滑过渡。

线性渐变

linear-gradient() 创建沿直线方向的渐变：

/* 基本用法 */
.simple {
    background: linear-gradient(#3498db, #2ecc71);
}

/* 指定方向 */
.direction {
    background: linear-gradient(to right, #3498db, #2ecc71);
    /* to right, to left, to top, to bottom */
}

/* 角度 */
.angle {
    background: linear-gradient(45deg, #3498db, #2ecc71);
}

/* 多个颜色 */
.multi {
    background: linear-gradient(#3498db, #2ecc71, #e74c3c);
}

/* 指定颜色位置 */
.position {
    background: linear-gradient(
        to right,
        #3498db 0%,
        #2ecc71 50%,
        #e74c3c 100%
    );
}

/* 硬边缘（颜色突变） */
.stripes {
    background: linear-gradient(
        to right,
        #3498db 0%,
        #3498db 50%,
        #2ecc71 50%,
        #2ecc71 100%
    );
}

/* 透明渐变 */
.fade {
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

径向渐变

radial-gradient() 创建从中心向外辐射的渐变：

/* 基本用法 */
.simple {
    background: radial-gradient(#3498db, #2ecc71);
}

/* 指定形状 */
.circle {
    background: radial-gradient(circle, #3498db, #2ecc71);
}
.ellipse {
    background: radial-gradient(ellipse, #3498db, #2ecc71);
}

/* 指定大小 */
.size {
    background: radial-gradient(circle closest-side, #3498db, #2ecc71);
    /* closest-side, farthest-side, closest-corner, farthest-corner */
}

/* 指定中心位置 */
.position {
    background: radial-gradient(circle at 30% 70%, #3498db, #2ecc71);
}

圆锥渐变

conic-gradient() 创建围绕中心点旋转的渐变：

.pie {
    background: conic-gradient(
        #3498db 0deg 120deg,
        #2ecc71 120deg 240deg,
        #e74c3c 240deg 360deg
    );
}

/* 色轮 */
.color-wheel {
    background: conic-gradient(
        red, yellow, lime, aqua, blue, magenta, red
    );
}

重复渐变

repeating-linear-gradient() 和 repeating-radial-gradient() 创建重复的渐变图案：

.stripes {
    background: repeating-linear-gradient(
        45deg,
        #3498db,
        #3498db 10px,
        #2ecc71 10px,
        #2ecc71 20px
    );
}

.dots {
    background: repeating-radial-gradient(
        circle at center,
        #3498db 0px,
        #3498db 10px,
        #2ecc71 10px,
        #2ecc71 20px
    );
}

边框属性

border 基本属性

边框由宽度、样式、颜色三部分组成：

.box {
    /* 简写 */
    border: 1px solid #333;
    
    /* 分开写 */
    border-width: 1px;
    border-style: solid;
    border-color: #333;
}

/* 单边设置 */
.box {
    border-top: 1px solid #333;
    border-right: 2px dashed #666;
    border-bottom: 1px dotted #999;
    border-left: none;
}

border-style 的常用值：

• solid：实线
• dashed：虚线
• dotted：点线
• double：双线
• none：无边框
• hidden：隐藏（与 none 类似，但用于表格时有区别）

border-radius 圆角

border-radius 创建圆角边框：

/* 统一圆角 */
.box {
    border-radius: 10px;
}

/* 四个角分别设置 */
.box {
    border-radius: 10px 20px 30px 40px;
    /* 左上 右上 右下 左下 */
}

/* 水平和垂直半径不同 */
.ellipse {
    border-radius: 50px / 20px;
    /* 水平半径 / 垂直半径 */
}

/* 单角设置 */
.box {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
}

/* 圆形 */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

/* 胶囊形状 */
.pill {
    border-radius: 9999px;
}

border-image 边框图片

border-image 使用图片作为边框：

.box {
    border: 20px solid transparent;
    border-image: url('border.png') 30 round;
    /* 图片路径 切割宽度 平铺方式 */
}

切割宽度指定图片的九宫格切割位置，中间部分作为边框内容。平铺方式包括 stretch（拉伸）、repeat（平铺）、round（平铺且拉伸调整）。

这个属性比较复杂，实际使用较少。更常用的做法是用伪元素创建装饰性边框。

box-shadow 盒子阴影

box-shadow 为元素添加阴影效果：

/* 基本阴影 */
.shadow {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

/* 带扩展半径 */
.spread {
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3);
    /* 水平 垂直 模糊 扩展 颜色 */
}

/* 内阴影 */
.inset {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* 多层阴影 */
.multi {
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.1),
        0 4px 8px rgba(0,0,0,0.1),
        0 8px 16px rgba(0,0,0,0.1);
}

/* 无偏移的均匀阴影 */
.even {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* 卡片悬浮效果 */
.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s;
}
.card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

阴影参数依次为：水平偏移（正值向右）、垂直偏移（正值向下）、模糊半径（越大越模糊）、扩展半径（正值扩大，负值缩小）、颜色。

inset 关键字将阴影改为内阴影，阴影出现在元素内部。

利用阴影创建边框效果

/* 双层边框效果 */
.double-border {
    box-shadow: 0 0 0 3px #3498db, 0 0 0 6px #e74c3c;
}

/* 模拟 outline 效果（不占用空间） */
.outline-effect {
    box-shadow: 0 0 0 2px #3498db;
}

使用 box-shadow 创建的"边框"不占用布局空间，且可以有圆角。

opacity 透明度

opacity 设置元素的整体透明度：

.transparent {
    opacity: 0.5;  /* 50% 透明 */
}

.invisible {
    opacity: 0;    /* 完全透明，但仍占据空间 */
}

.solid {
    opacity: 1;    /* 完全不透明（默认） */
}

opacity 影响元素及其所有子元素。如果只想让背景透明，应该使用 rgba 颜色：

/* 整体半透明 */
.semi-transparent {
    background: #333;
    opacity: 0.5;
    /* 文字也会半透明 */
}

/* 只有背景半透明 */
.bg-transparent {
    background: rgba(51, 51, 51, 0.5);
    /* 文字保持不透明 */
}

小结

这一章我们学习了：

• 背景属性：background-color、background-image、background-repeat、background-position、background-size 等
• 多重背景的使用
• CSS 渐变：线性渐变、径向渐变、圆锥渐变、重复渐变
• 边框属性：border、border-radius、border-image
• box-shadow 盒子阴影
• opacity 透明度

背景和边框是视觉设计的重要组成部分。渐变可以创建丰富的视觉效果，阴影可以增加层次感。记住这些属性的常用模式，可以快速实现各种 UI 效果。

下一章我们将学习 CSS Flexbox 布局，这是现代 CSS 布局的核心技术之一。