Tech Docs Station

Appearance

背景与边框 ​

本章将介绍CSS背景和边框样式，包括背景颜色、背景图片、渐变效果、边框样式和阴影效果。

背景颜色 ​

background-color ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景颜色示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 10px;
            padding: 20px;
            display: inline-block;
            vertical-align: top;
        }
        
        /* 颜色名称 */
        .color-name {
            background-color: red;
        }
        
        /* 十六进制 */
        .hex {
            background-color: #4CAF50;
        }
        
        /* RGB */
        .rgb {
            background-color: rgb(33, 150, 243);
        }
        
        /* RGBA（带透明度） */
        .rgba {
            background-color: rgba(255, 0, 0, 0.5);
        }
        
        /* HSL */
        .hsl {
            background-color: hsl(120, 100%, 50%);
        }
        
        /* 透明 */
        .transparent {
            background-color: transparent;
        }
        
        /* currentColor */
        .current {
            color: #4CAF50;
            background-color: currentColor;
        }
    </style>
</head>
<body>
    <div class="box color-name">颜色名称</div>
    <div class="box hex">十六进制</div>
    <div class="box rgb">RGB</div>
    <div class="box rgba">RGBA半透明</div>
    <div class="box hsl">HSL</div>
    <div class="box transparent">透明背景</div>
</body>
</html>

背景图片 ​

background-image ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景图片示例</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid #333;
            margin: 10px;
            display: inline-block;
            vertical-align: top;
        }
        
        /* 单张背景图 */
        .single {
            background-image: url('https://picsum.photos/300/200');
        }
        
        /* 多张背景图 */
        .multiple {
            background-image: 
                url('https://picsum.photos/100/100'),
                url('https://picsum.photos/300/200');
            background-position: top right, center;
            background-repeat: no-repeat;
        }
        
        /* 渐变作为背景 */
        .gradient {
            background-image: linear-gradient(to right, red, blue);
        }
        
        /* 无背景图 */
        .none {
            background-image: none;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="box single">单张背景图</div>
    <div class="box multiple">多张背景图</div>
    <div class="box gradient">渐变背景</div>
    <div class="box none">无背景图</div>
</body>
</html>

background-repeat ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>background-repeat示例</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid #333;
            margin: 10px;
            display: inline-block;
            vertical-align: top;
            background-image: url('https://picsum.photos/100/100');
        }
        
        /* 重复（默认） */
        .repeat {
            background-repeat: repeat;
        }
        
        /* 水平重复 */
        .repeat-x {
            background-repeat: repeat-x;
        }
        
        /* 垂直重复 */
        .repeat-y {
            background-repeat: repeat-y;
        }
        
        /* 不重复 */
        .no-repeat {
            background-repeat: no-repeat;
        }
        
        /* 圆形重复 */
        .round {
            background-repeat: round;
        }
        
        /* 空间重复 */
        .space {
            background-repeat: space;
        }
        
        /* 分别设置水平和垂直 */
        .both {
            background-repeat: repeat-x no-repeat;
        }
    </style>
</head>
<body>
    <div class="box repeat">repeat（默认）</div>
    <div class="box repeat-x">repeat-x</div>
    <div class="box repeat-y">repeat-y</div>
    <div class="box no-repeat">no-repeat</div>
</body>
</html>

background-position ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>background-position示例</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid #333;
            margin: 10px;
            display: inline-block;
            vertical-align: top;
            background-image: url('https://picsum.photos/100/100');
            background-repeat: no-repeat;
            background-color: #f5f5f5;
        }
        
        /* 关键字 */
        .center { background-position: center; }
        .top { background-position: top; }
        .bottom { background-position: bottom; }
        .left { background-position: left; }
        .right { background-position: right; }
        .top-left { background-position: top left; }
        .bottom-right { background-position: bottom right; }
        
        /* 像素值 */
        .pixels { background-position: 50px 100px; }
        
        /* 百分比 */
        .percent { background-position: 50% 50%; }
        
        /* 混合使用 */
        .mixed { background-position: 20px center; }
    </style>
</head>
<body>
    <div class="box center">center</div>
    <div class="box top-left">top left</div>
    <div class="box bottom-right">bottom right</div>
    <div class="box pixels">50px 100px</div>
    <div class="box percent">50% 50%</div>
</body>
</html>

background-size ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>background-size示例</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid #333;
            margin: 10px;
            display: inline-block;
            vertical-align: top;
            background-image: url('https://picsum.photos/500/300');
            background-repeat: no-repeat;
            background-position: center;
        }
        
        /* 自动（默认） */
        .auto { background-size: auto; }
        
        /* 固定像素 */
        .pixels { background-size: 200px 150px; }
        
        /* 百分比 */
        .percent { background-size: 100% 100%; }
        
        /* cover：覆盖整个容器，可能裁剪 */
        .cover { background-size: cover; }
        
        /* contain：完整显示图片，可能留白 */
        .contain { background-size: contain; }
    </style>
</head>
<body>
    <div class="box auto">auto（原始大小）</div>
    <div class="box pixels">200px 150px</div>
    <div class="box cover">cover（覆盖）</div>
    <div class="box contain">contain（包含）</div>
</body>
</html>

background-attachment ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>background-attachment示例</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid #333;
            margin: 10px;
            overflow: auto;
            background-image: url('https://picsum.photos/500/300');
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        /* 滚动（默认） */
        .scroll { background-attachment: scroll; }
        
        /* 固定（视口固定） */
        .fixed { background-attachment: fixed; }
        
        /* 本地（元素内容固定） */
        .local { background-attachment: local; }
        
        .content {
            height: 500px;
            padding: 20px;
            color: white;
            text-shadow: 1px 1px 2px black;
        }
    </style>
</head>
<body>
    <div class="box scroll">
        <div class="content">scroll：滚动内容试试</div>
    </div>
    
    <div class="box local">
        <div class="content">local：滚动内容试试</div>
    </div>
</body>
</html>

background简写 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>background简写示例</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            margin: 10px;
            display: inline-block;
            vertical-align: top;
        }
        
        /* 完整简写 */
        .shorthand {
            /* background: color image position/size repeat attachment */
            background: #f5f5f5 url('https://picsum.photos/100/100') center/cover no-repeat scroll;
        }
        
        /* 多重背景 */
        .multiple {
            background: 
                url('https://picsum.photos/50/50') top left no-repeat,
                url('https://picsum.photos/50/50') top right no-repeat,
                url('https://picsum.photos/50/50') bottom left no-repeat,
                url('https://picsum.photos/50/50') bottom right no-repeat,
                #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="box shorthand">简写形式</div>
    <div class="box multiple">多重背景</div>
</body>
</html>

CSS渐变 ​

线性渐变 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>线性渐变示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 10px;
            display: inline-block;
            vertical-align: top;
        }
        
        /* 基本线性渐变（从上到下） */
        .basic {
            background: linear-gradient(red, blue);
        }
        
        /* 指定方向 */
        .to-right {
            background: linear-gradient(to right, red, blue);
        }
        
        .to-bottom-right {
            background: linear-gradient(to bottom right, red, blue);
        }
        
        /* 使用角度 */
        .deg-45 {
            background: linear-gradient(45deg, red, blue);
        }
        
        .deg-90 {
            background: linear-gradient(90deg, red, blue);
        }
        
        /* 多色渐变 */
        .multi-color {
            background: linear-gradient(red, yellow, green, blue);
        }
        
        /* 指定颜色位置 */
        .color-stop {
            background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
        }
        
        /* 透明渐变 */
        .transparent {
            background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0));
        }
        
        /* 重复渐变 */
        .repeating {
            background: repeating-linear-gradient(
                45deg,
                red,
                red 10px,
                blue 10px,
                blue 20px
            );
        }
    </style>
</head>
<body>
    <div class="box basic">基本渐变</div>
    <div class="box to-right">向右渐变</div>
    <div class="box deg-45">45度渐变</div>
    <div class="box multi-color">多色渐变</div>
    <div class="box color-stop">指定位置</div>
    <div class="box repeating">重复渐变</div>
</body>
</html>

径向渐变 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>径向渐变示例</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            margin: 10px;
            display: inline-block;
            vertical-align: top;
            border-radius: 4px;
        }
        
        /* 基本径向渐变 */
        .basic {
            background: radial-gradient(red, blue);
        }
        
        /* 指定形状 */
        .circle {
            background: radial-gradient(circle, red, blue);
        }
        
        .ellipse {
            background: radial-gradient(ellipse, red, blue);
        }
        
        /* 指定大小 */
        .closest-side {
            background: radial-gradient(circle closest-side, red, blue);
        }
        
        .farthest-corner {
            background: radial-gradient(circle farthest-corner, red, blue);
        }
        
        /* 指定位置 */
        .position {
            background: radial-gradient(circle at top right, red, blue);
        }
        
        .center-position {
            background: radial-gradient(circle at 50% 50%, red, yellow, blue);
        }
        
        /* 多色径向渐变 */
        .multi-color {
            background: radial-gradient(red, yellow, green, blue);
        }
        
        /* 重复径向渐变 */
        .repeating {
            background: repeating-radial-gradient(
                circle,
                red,
                red 10px,
                blue 10px,
                blue 20px
            );
        }
    </style>
</head>
<body>
    <div class="box basic">基本径向</div>
    <div class="box circle">圆形</div>
    <div class="box position">右上角</div>
    <div class="box multi-color">多色</div>
    <div class="box repeating">重复渐变</div>
</body>
</html>

圆锥渐变 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>圆锥渐变示例</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            margin: 10px;
            display: inline-block;
            vertical-align: top;
            border-radius: 50%;
        }
        
        /* 基本圆锥渐变 */
        .basic {
            background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
        }
        
        /* 指定起始角度 */
        .from-deg {
            background: conic-gradient(from 45deg, red, yellow, blue, red);
        }
        
        /* 指定中心位置 */
        .at-position {
            background: conic-gradient(at 25% 25%, red, yellow, blue, red);
        }
        
        /* 饼图效果 */
        .pie {
            background: conic-gradient(
                red 0deg 120deg,
                yellow 120deg 240deg,
                blue 240deg 360deg
            );
        }
        
        /* 重复圆锥渐变 */
        .repeating {
            background: repeating-conic-gradient(
                red 0deg 30deg,
                yellow 30deg 60deg
            );
        }
    </style>
</head>
<body>
    <div class="box basic">基本圆锥</div>
    <div class="box from-deg">45度起始</div>
    <div class="box pie">饼图效果</div>
    <div class="box repeating">重复渐变</div>
</body>
</html>

边框样式 ​

border-width、border-style、border-color ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>边框样式示例</title>
    <style>
        .box {
            width: 150px;
            height: 80px;
            margin: 10px;
            padding: 10px;
            display: inline-block;
            vertical-align: top;
            background-color: #f5f5f5;
        }
        
        /* 边框样式 */
        .solid { border: 2px solid #333; }
        .dashed { border: 2px dashed #333; }
        .dotted { border: 2px dotted #333; }
        .double { border: 4px double #333; }
        .groove { border: 4px groove #333; }
        .ridge { border: 4px ridge #333; }
        .inset { border: 4px inset #333; }
        .outset { border: 4px outset #333; }
        
        /* 分别设置四边 */
        .different {
            border-top: 3px solid red;
            border-right: 3px dashed green;
            border-bottom: 3px dotted blue;
            border-left: 3px double orange;
        }
        
        /* 边框宽度 */
        .width-varied {
            border-style: solid;
            border-color: #333;
            border-width: 1px 5px 10px 15px;
        }
        
        /* 边框颜色 */
        .color-varied {
            border: 3px solid;
            border-color: red green blue orange;
        }
    </style>
</head>
<body>
    <div class="box solid">solid 实线</div>
    <div class="box dashed">dashed 虚线</div>
    <div class="box dotted">dotted 点线</div>
    <div class="box double">double 双线</div>
    <div class="box groove">groove 凹槽</div>
    <div class="box ridge">ridge 凸脊</div>
    <div class="box different">四边不同</div>
</body>
</html>

border-radius（圆角） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>圆角边框示例</title>
    <style>
        .box {
            width: 150px;
            height: 100px;
            margin: 10px;
            display: inline-block;
            vertical-align: top;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            line-height: 100px;
        }
        
        /* 统一圆角 */
        .radius-10 { border-radius: 10px; }
        .radius-20 { border-radius: 20px; }
        .radius-50 { border-radius: 50px; }
        
        /* 四个角分别设置 */
        .radius-different {
            border-radius: 10px 20px 30px 40px;  /* 左上 右上 右下 左下 */
        }
        
        /* 椭圆圆角 */
        .ellipse-radius {
            border-radius: 30px / 15px;  /* 水平 / 垂直 */
        }
        
        /* 圆形 */
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        
        /* 单独设置每个角 */
        .single-corner {
            border-top-left-radius: 20px;
            border-top-right-radius: 40px;
            border-bottom-right-radius: 60px;
            border-bottom-left-radius: 80px;
        }
    </style>
</head>
<body>
    <div class="box radius-10">10px圆角</div>
    <div class="box radius-different">四角不同</div>
    <div class="box ellipse-radius">椭圆圆角</div>
    <div class="box circle">圆形</div>
    <div class="box single-corner">单独设置</div>
</body>
</html>

border-image（边框图片） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>边框图片示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 20px;
            padding: 20px;
            border: 30px solid transparent;
        }
        
        /* 基本边框图片 */
        .basic {
            border-image: url('border.png') 30 round;
        }
        
        /* 边框图片属性分解 */
        .detailed {
            border-image-source: url('border.png');
            border-image-slice: 30;          /* 切割位置 */
            border-image-width: 30px;        /* 边框宽度 */
            border-image-outset: 0;          /* 边框外延 */
            border-image-repeat: round;      /* 重复方式 */
        }
        
        /* stretch拉伸 */
        .stretch {
            border-image: url('border.png') 30 stretch;
        }
        
        /* repeat重复 */
        .repeat {
            border-image: url('border.png') 30 repeat;
        }
        
        /* round平铺 */
        .round {
            border-image: url('border.png') 30 round;
        }
        
        /* 使用渐变作为边框 */
        .gradient-border {
            border: 5px solid;
            border-image: linear-gradient(45deg, red, blue) 1;
        }
    </style>
</head>
<body>
    <div class="box stretch">stretch拉伸</div>
    <div class="box repeat">repeat重复</div>
    <div class="box gradient-border">渐变边框</div>
</body>
</html>

盒子阴影 ​

box-shadow ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影示例</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 30px;
            padding: 20px;
            background-color: white;
            display: inline-block;
            vertical-align: top;
        }
        
        /* 基本阴影 */
        .basic {
            /* box-shadow: 水平偏移 垂直偏移 模糊半径 颜色; */
            box-shadow: 10px 10px 5px #888;
        }
        
        /* 带扩展半径 */
        .spread {
            /* box-shadow: 水平 垂直 模糊 扩展 颜色; */
            box-shadow: 10px 10px 5px 10px #888;
        }
        
        /* 内阴影 */
        .inset {
            box-shadow: inset 10px 10px 5px #888;
        }
        
        /* 多层阴影 */
        .multiple {
            box-shadow: 
                0 0 10px rgba(0,0,0,0.3),
                0 0 20px rgba(0,0,0,0.2),
                0 0 30px rgba(0,0,0,0.1);
        }
        
        /* 彩色阴影 */
        .colorful {
            box-shadow: 
                0 0 20px red,
                0 0 40px yellow,
                0 0 60px green;
        }
        
        /* 卡片阴影效果 */
        .card {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: box-shadow 0.3s;
        }
        
        .card:hover {
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        }
        
        /* 悬浮效果 */
        .float {
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            transition: all 0.3s;
        }
        
        .float:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="box basic">基本阴影</div>
    <div class="box inset">内阴影</div>
    <div class="box multiple">多层阴影</div>
    <div class="box card">卡片效果（悬停试试）</div>
    <div class="box float">悬浮效果（悬停试试）</div>
</body>
</html>

透明度 ​

opacity ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>透明度示例</title>
    <style>
        .container {
            background-image: url('https://picsum.photos/400/200');
            padding: 20px;
            margin: 10px;
        }
        
        .box {
            width: 150px;
            height: 80px;
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            margin: 10px;
            display: inline-block;
        }
        
        /* 不同透明度 */
        .opacity-1 { opacity: 1; }      /* 完全不透明 */
        .opacity-8 { opacity: 0.8; }    /* 80%不透明 */
        .opacity-5 { opacity: 0.5; }    /* 50%不透明 */
        .opacity-2 { opacity: 0.2; }    /* 20%不透明 */
        
        /* 透明度影响所有内容 */
        .opacity-all {
            opacity: 0.5;
        }
        
        /* 只透明背景，不影响内容 */
        .rgba-background {
            background-color: rgba(76, 175, 80, 0.5);
        }
    </style>
</head>
<body>
    <h3>opacity属性</h3>
    <div class="container">
        <div class="box opacity-1">opacity: 1</div>
        <div class="box opacity-8">opacity: 0.8</div>
        <div class="box opacity-5">opacity: 0.5</div>
        <div class="box opacity-2">opacity: 0.2</div>
    </div>
    
    <h3>opacity vs rgba</h3>
    <div class="container">
        <div class="box opacity-all">opacity: 0.5<br>内容也变淡</div>
        <div class="box rgba-background">rgba背景<br>内容不变淡</div>
    </div>
</body>
</html>

综合示例 ​

html
<!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: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        /* 卡片样式 */
        .card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            overflow: hidden;
            margin-bottom: 30px;
        }
        
        /* 头部背景 */
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 30px;
            color: white;
            text-align: center;
        }
        
        .card-header h1 {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        /* 内容区域 */
        .card-body {
            padding: 30px;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            margin: 5px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid #667eea;
            color: #667eea;
        }
        
        .btn-outline:hover {
            background: #667eea;
            color: white;
        }
        
        /* 图片卡片 */
        .image-card {
            width: 280px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            display: inline-block;
            margin: 10px;
            vertical-align: top;
            transition: all 0.3s;
        }
        
        .image-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.25);
        }
        
        .image-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        .image-card .content {
            padding: 15px;
            background: white;
        }
        
        .image-card h3 {
            margin-bottom: 8px;
            color: #333;
        }
        
        .image-card p {
            color: #666;
            font-size: 14px;
        }
        
        /* 渐变文字 */
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-size: 2rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }
        
        /* 圆形头像 */
        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 4px solid white;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            object-fit: cover;
        }
        
        /* 标签样式 */
        .tag {
            display: inline-block;
            padding: 4px 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 20px;
            font-size: 12px;
            margin: 2px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h1>背景与边框效果</h1>
                <p>CSS背景、渐变、边框、阴影综合应用</p>
            </div>
            <div class="card-body">
                <p class="gradient-text">渐变文字效果</p>
                
                <h3>按钮样式</h3>
                <button class="btn btn-primary">主要按钮</button>
                <button class="btn btn-outline">边框按钮</button>
                
                <h3 style="margin-top: 30px;">图片卡片</h3>
                <div class="image-card">
                    <img src="https://picsum.photos/300/200" alt="图片">
                    <div class="content">
                        <h3>卡片标题</h3>
                        <p>这是卡片的描述内容</p>
                        <span class="tag">标签1</span>
                        <span class="tag">标签2</span>
                    </div>
                </div>
                
                <div class="image-card">
                    <img src="https://picsum.photos/300/200?random=2" alt="图片">
                    <div class="content">
                        <h3>另一个卡片</h3>
                        <p>展示阴影和圆角效果</p>
                        <span class="tag">CSS</span>
                        <span class="tag">设计</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

本章小结 ​

本章我们学习了：

  1. 背景颜色：background-color设置背景颜色
  2. 背景图片：background-image、background-repeat、background-position、background-size
  3. CSS渐变：线性渐变、径向渐变、圆锥渐变
  4. 边框样式：border-width、border-style、border-color、border-radius
  5. 边框图片：border-image属性
  6. 盒子阴影：box-shadow创建各种阴影效果
  7. 透明度：opacity和rgba的区别

下一章 ​

下一章我们将学习 过渡与动画，创建流畅的动画效果。