Tech Docs Station

Appearance

背景与边框 ​

CSS 提供了丰富的背景和边框属性，用于美化网页元素。

背景属性 ​

background-color ​

设置背景颜色：

css
div {
    background-color: #fff;
    background-color: white;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.5);
    background-color: transparent;
}

background-image ​

设置背景图片：

css
div {
    background-image: url('image.jpg');
    background-image: url('image1.jpg'), url('image2.jpg'); /* 多重背景 */
}

background-repeat ​

设置背景重复方式：

css
div {
    background-repeat: repeat;     /* 平铺（默认） */
    background-repeat: no-repeat;  /* 不重复 */
    background-repeat: repeat-x;   /* 水平重复 */
    background-repeat: repeat-y;   /* 垂直重复 */
    background-repeat: space;      /* 间距平铺 */
    background-repeat: round;      /* 缩放平铺 */
}

background-position ​

设置背景位置：

css
div {
    background-position: center;
    background-position: top left;
    background-position: center center;
    background-position: 50% 50%;
    background-position: 20px 30px;
}

background-size ​

设置背景尺寸：

css
div {
    background-size: auto;         /* 原始大小（默认） */
    background-size: cover;        /* 覆盖容器，可能裁剪 */
    background-size: contain;      /* 包含在容器内，可能留白 */
    background-size: 100% 100%;    /* 拉伸填满 */
    background-size: 200px 150px;  /* 固定尺寸 */
}

background-attachment ​

设置背景滚动方式：

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

background-clip ​

设置背景绘制区域：

css
div {
    background-clip: border-box;   /* 到边框（默认） */
    background-clip: padding-box;  /* 到内边距 */
    background-clip: content-box;  /* 到内容区 */
    background-clip: text;         /* 到文字 */
}

background-origin ​

设置背景定位区域：

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

background 简写 ​

css
div {
    background: #fff url('image.jpg') no-repeat center/cover;
    /* color image repeat position/size */
}

渐变背景 ​

线性渐变 ​

css
/* 从上到下 */
.linear-1 {
    background: linear-gradient(#fff, #000);
}

/* 从左到右 */
.linear-2 {
    background: linear-gradient(to right, #fff, #000);
}

/* 对角线 */
.linear-3 {
    background: linear-gradient(to bottom right, #fff, #000);
}

/* 指定角度 */
.linear-4 {
    background: linear-gradient(45deg, #fff, #000);
}

/* 多色渐变 */
.linear-5 {
    background: linear-gradient(red, yellow, green);
}

/* 指定颜色位置 */
.linear-6 {
    background: linear-gradient(red 0%, yellow 50%, green 100%);
}

径向渐变 ​

css
/* 默认从中心开始 */
.radial-1 {
    background: radial-gradient(#fff, #000);
}

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

/* 指定位置 */
.radial-3 {
    background: radial-gradient(circle at top left, #fff, #000);
}

/* 指定大小 */
.radial-4 {
    background: radial-gradient(circle closest-side, #fff, #000);
    background: radial-gradient(circle farthest-corner, #fff, #000);
}

重复渐变 ​

css
.repeating-linear {
    background: repeating-linear-gradient(
        45deg,
        #fff,
        #fff 10px,
        #000 10px,
        #000 20px
    );
}

.repeating-radial {
    background: repeating-radial-gradient(
        circle,
        #fff,
        #fff 10px,
        #000 10px,
        #000 20px
    );
}

边框属性 ​

border-width ​

设置边框宽度：

css
div {
    border-width: 1px;
    border-width: thin;      /* 细 */
    border-width: medium;    /* 中 */
    border-width: thick;     /* 粗 */
    border-width: 1px 2px 3px 4px; /* 上 右 下 左 */
}

border-style ​

设置边框样式：

css
div {
    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-color ​

设置边框颜色：

css
div {
    border-color: red;
    border-color: #ff0000;
    border-color: rgb(255, 0, 0);
}

border 简写 ​

css
div {
    border: 1px solid #ccc;
    /* width style color */
}

单边边框 ​

css
div {
    border-top: 1px solid red;
    border-right: 2px dashed blue;
    border-bottom: 3px dotted green;
    border-left: 1px solid black;
}

圆角边框 ​

border-radius ​

css
div {
    /* 四角相同 */
    border-radius: 10px;
    
    /* 左上右下 | 右上左下 */
    border-radius: 10px 20px;
    
    /* 左上 | 右上左下 | 右下 */
    border-radius: 10px 20px 30px;
    
    /* 左上 | 右上 | 右下 | 左下 */
    border-radius: 10px 20px 30px 40px;
    
    /* 圆形 */
    border-radius: 50%;
    
    /* 椭圆 */
    border-radius: 50% / 30%;
}

单角设置 ​

css
div {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
}

边框图片 ​

border-image ​

css
div {
    border: 20px solid;
    border-image: url('border.png') 30 round;
    /* source slice width outset repeat */
}
css
div {
    border-image-source: url('border.png');
    border-image-slice: 30;
    border-image-width: 20px;
    border-image-outset: 0;
    border-image-repeat: round; /* stretch | repeat | round | space */
}

盒子阴影 ​

box-shadow ​

css
div {
    /* x偏移 y偏移 模糊 扩展 颜色 */
    box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, 0.3);
    
    /* 内阴影 */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    
    /* 多重阴影 */
    box-shadow: 
        0 0 10px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 0, 0, 0.2);
}

透明度 ​

opacity ​

设置元素透明度：

css
div {
    opacity: 1;    /* 完全不透明 */
    opacity: 0.5;  /* 半透明 */
    opacity: 0;    /* 完全透明 */
}

实践示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景与边框示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        h2 {
            margin: 30px 0 15px;
            color: #333;
        }
        
        /* 渐变背景 */
        .gradient-1 {
            height: 100px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            margin-bottom: 10px;
        }
        
        .gradient-2 {
            height: 100px;
            background: linear-gradient(to right, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
            border-radius: 8px;
            margin-bottom: 10px;
        }
        
        .gradient-3 {
            height: 100px;
            background: radial-gradient(circle at center, #fff 0%, #000 100%);
            border-radius: 8px;
        }
        
        /* 圆角卡片 */
        .card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .card:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }
        
        /* 边框样式 */
        .border-demo {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .border-item {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
        }
        
        .border-solid { border: 3px solid #333; }
        .border-dashed { border: 3px dashed #333; }
        .border-dotted { border: 3px dotted #333; }
        .border-double { border: 5px double #333; }
        
        /* 圆角演示 */
        .radius-demo {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .radius-item {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .radius-1 { border-radius: 10px; }
        .radius-2 { border-radius: 20px; }
        .radius-3 { border-radius: 50%; }
        .radius-4 { border-radius: 10px 30px; }
        
        /* 阴影效果 */
        .shadow-demo {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }
        
        .shadow-item {
            width: 120px;
            height: 80px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
        }
        
        .shadow-1 { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .shadow-2 { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
        .shadow-3 { box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
        .shadow-4 { box-shadow: inset 0 2px 10px rgba(0,0,0,0.2); }
        
        /* 条纹背景 */
        .striped {
            height: 50px;
            background: repeating-linear-gradient(
                45deg,
                #fff,
                #fff 10px,
                #f0f0f0 10px,
                #f0f0f0 20px
            );
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>背景与边框示例</h1>
        
        <h2>渐变背景</h2>
        <div class="gradient-1"></div>
        <div class="gradient-2"></div>
        <div class="gradient-3"></div>
        
        <h2>卡片效果</h2>
        <div class="card">
            <h3>卡片标题</h3>
            <p>这是一个带有圆角和阴影的卡片组件。</p>
        </div>
        
        <h2>边框样式</h2>
        <div class="border-demo">
            <div class="border-item border-solid">实线</div>
            <div class="border-item border-dashed">虚线</div>
            <div class="border-item border-dotted">点线</div>
            <div class="border-item border-double">双线</div>
        </div>
        
        <h2>圆角效果</h2>
        <div class="radius-demo">
            <div class="radius-item radius-1">10px</div>
            <div class="radius-item radius-2">20px</div>
            <div class="radius-item radius-3">50%</div>
            <div class="radius-item radius-4">不等</div>
        </div>
        
        <h2>阴影效果</h2>
        <div class="shadow-demo">
            <div class="shadow-item shadow-1">轻微</div>
            <div class="shadow-item shadow-2">中等</div>
            <div class="shadow-item shadow-3">强烈</div>
            <div class="shadow-item shadow-4">内阴影</div>
        </div>
        
        <h2>条纹背景</h2>
        <div class="striped"></div>
    </div>
</body>
</html>