【技术专题】CSS3 网页技术 - CSS3 基础样式

java1234_小锋2026-10-30 8:34

大家好，我是Java1234_小锋老师，最近更新 《一天学会 CSS3 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 CSS3简介，CSS3 入门，CSS3 选择器与优先级，CSS3 单位、颜色、字体与文本，CSS3 盒模型 与基础样式，CSS3 布局基础，CSS3 布局进阶，CSS3 视觉 增强，CSS3 变换与动画，CSS3 函数与变量，CSS3 响应式 与移动端适配，CSS3 工程化与最佳实践。

视频教程+课件+源码 打包下载 ：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

CSS3（在第二阶段目录里）

CSS3 基础样式

一、背景相关样式

1. background-color

设置元素背景颜色。

复制代码 
background-color: #f5f5f5;
background-color: rgba(0, 0, 0, 0.5);
background-color: transparent;

常用值：颜色关键字、十六进制、rgb()、rgba()、hsl()、hsla()、transparent。

2. background-image

设置背景图片，可以是图片或渐变。

复制代码 
background-image: url(bg.jpg);
background-image: linear-gradient(135deg, #e0f2fe, #fff);
background-image: url(a.png), url(b.png); /* 多背景 */

常用值：none、url()、linear-gradient()、radial-gradient()。

多背景时用逗号分隔，前面的层显示在上方。

3. background-repeat

控制背景图片是否重复以及如何重复。

复制代码 
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;

常用值：repeat、repeat-x、repeat-y、no-repeat、space、round。

4. background-position

设置背景图片的位置。

复制代码 
background-position: center;
background-position: left top;
background-position: 50% 50%;
background-position: 10px 20px;
background-position: right 10px bottom 20px;

常用值：关键字、百分比、长度值。

多背景时用逗号分别设置。

5. background-size

CSS3 新增，设置背景图片大小。

复制代码 
background-size: auto;
background-size: 100px 50px;
background-size: 50% auto;
background-size: cover;
background-size: contain;

说明：

  • cover：保持比例，铺满整个容器，可能裁剪图片。
  • contain：保持比例，完整显示图片，可能留白。
  • 在 background 简写中，位置和大小用 / 分隔，如 center / cover。
6. background-clip

设置背景的绘制和裁剪区域。

复制代码 
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text; /* 常用于文字渐变，通常需 -webkit- 前缀 */

常用值：

  • border-box：背景延伸到边框外沿，默认值。
  • padding-box：背景只到内边距区域。
  • content-box：背景只在内容区域。
  • text：背景裁剪为文字形状。
7. background-origin

设置背景定位的起点。

复制代码 
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

区别：

  • background-origin 决定背景从哪里开始定位。
  • background-clip 决定背景绘制到哪里。

默认值：padding-box。

8. background-attachment

设置背景图片是否随页面或元素滚动。

复制代码 
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

说明：

  • scroll：默认，背景随元素滚动。
  • fixed：背景相对于视口固定。
  • local：背景随元素内容一起滚动。
背景简写 background
复制代码 
background: #fff url(bg.jpg) no-repeat center / cover fixed padding-box border-box;

顺序可灵活，但注意：

  • position / size 用 / 分隔。
  • 两个 box 值时，第一个是 origin，第二个是 clip。
  • 多背景用逗号分隔。

二、边框圆角：border-radius

设置元素圆角。

复制代码 
border-radius: 10px;
border-radius: 10px 20px;
border-radius: 10px 20px 30px 40px;
border-radius: 50%;
border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;

四值顺序：左上、右上、右下、左下。

斜杠前是水平半径，斜杠后是垂直半径。

百分比可创建椭圆圆角。

也可以单独设置：

复制代码 
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;

三、阴影

1. box-shadow

给元素添加盒子阴影。

复制代码 
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px #999 inset;
box-shadow: 2px 2px 5px #ccc, -2px -2px 5px #fff;

语法：

复制代码 
box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色 inset;

说明：

  • 默认是外阴影，inset 表示内阴影。
  • 可以设置多个阴影，用逗号分隔。
  • 阴影不占据空间，不影响布局。
2. text-shadow

给文字添加阴影。

复制代码 
text-shadow: 1px 1px 2px #000;
text-shadow: 0 0 5px #fff, 0 0 10px #0af;

语法：

复制代码 
text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;

说明：

  • 没有扩展半径，也没有 inset。
  • 常用于文字发光、描边感、浮雕效果。

四、列表样式：list-style

用于设置列表项标记。

复制代码 
list-style: none;
list-style: square inside;
list-style: decimal outside;
list-style: url(icon.png) no-repeat;

它是以下属性的简写：

复制代码 
list-style-type: disc | circle | square | decimal | lower-alpha | upper-roman | none;
list-style-position: inside | outside;
list-style-image: url(icon.png) | none;

示例：

复制代码 
ul {
  list-style: square inside url(icon.png);
}

注意：list-style: none; 常用于清除默认列表标记，但列表通常还需要处理 padding 和 margin。

五、表格样式

1. border-collapse

控制表格相邻单元格边框是否合并。

复制代码 
border-collapse: separate; /* 默认，边框分离 */
border-collapse: collapse; /* 合并边框 */

示例：

复制代码 
table {
  border-collapse: collapse;
}
2. border-spacing

设置分离边框之间的间距，只在 border-collapse: separate; 时有效。

复制代码 
border-spacing: 10px;
border-spacing: 10px 6px;

第一个值表示水平间距，第二个值表示垂直间距。

如果 border-collapse: collapse;，border-spacing 无效。

六、溢出处理

1. overflow

控制内容超出元素框时如何显示。

复制代码 
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
overflow: clip;

说明：

  • visible：默认，超出部分可见。
  • hidden：超出部分裁剪隐藏。
  • scroll：总是显示滚动条。
  • auto：需要时显示滚动条。
  • clip：类似隐藏，但不创建滚动容器。

overflow 非 visible 时通常会创建 BFC，可用于清除浮动或控制布局。

2. overflow-x 和 overflow-y

分别控制水平方向和垂直方向溢出。

复制代码 
overflow-x: hidden;
overflow-y: auto;

示例：

复制代码 
.box {
  width: 200px;
  height: 100px;
  overflow-x: hidden;
  overflow-y: auto;
}

注意：如果 overflow-x 和 overflow-y 中一个为 visible，另一个不是 visible，那么 visible 会被计算为 auto。

七、综合示例

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 基础样式综合示例</title>
<style>
  /* ========== 全局基础 ========== */
  * { box-sizing: border-box; }

  body {
    margin: 0;
    padding: 30px;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    /* 页面整体背景：线性渐变 + 固定不滚动 */
    background-image: linear-gradient(135deg, #e0f2fe 0%, #f8fafc 50%, #fce7f3 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }

  h1 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 10px;
    /* 文字阴影：描边 + 柔和发光 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .25),
                 0 0 8px rgba(59, 130, 246, .35);
  }

  h2 {
    font-size: 18px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
    /* 文字阴影：轻微浮雕 */
    text-shadow: 0 1px 0 #fff;
  }

  .subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 36px;
    font-size: 14px;
  }

  /* 卡片通用样式：圆角 + 阴影 */
  .section {
    max-width: 980px;
    margin: 0 auto 30px;
    padding: 24px;
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  }

  /* ========== 1. 背景示例区 ========== */
  .bg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .bg-box {
    width: 180px;
    height: 130px;
    border-radius: 10px;
    border: 1px solid #ddd;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6px;
    font-size: 12px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  }

  /* background-color */
  .bg-color {
    background-color: #3b82f6;
  }

  /* background-image：线性渐变 */
  .bg-gradient {
    background-image: linear-gradient(135deg, #f97316, #ec4899);
  }

  /* background-repeat：纵向重复 */
  .bg-repeat {
    background-color: #0ea5e9;
    background-image: radial-gradient(circle, #fff 3px, transparent 4px);
    background-repeat: repeat-y;
    background-position: left top;
    background-size: 30px 30px;
  }

  /* background-position + size：cover */
  .bg-cover {
    background-image: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
      <rect width='200' height='200' fill='%2310b981'/>\
      <circle cx='60' cy='60' r='30' fill='%23facc15'/>\
      <circle cx='150' cy='140' r='40' fill='%23ef4444'/>\
      </svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  /* background-size：contain */
  .bg-contain {
    background-color: #6366f1;
    background-image: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
      <rect width='200' height='200' fill='%2310b981'/>\
      <circle cx='100' cy='100' r='70' fill='%23facc15'/>\
      </svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* background-clip: content-box + padding-box 对比 */
  .bg-clip-demo {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
  }

  .clip-box {
    width: 180px;
    height: 110px;
    padding: 12px;
    border: 8px dashed #3b82f6;
    border-radius: 8px;
    background-color: #fbbf24;
    background-image: linear-gradient(135deg, #fbbf24, #f472b6);
    background-repeat: no-repeat;
    font-size: 12px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  }

  .clip-border-box  { background-clip: border-box; }
  .clip-padding-box { background-clip: padding-box; }
  .clip-content-box { background-clip: content-box; }

  /* background-origin：定位起点不同 */
  .origin-box {
    width: 180px;
    height: 110px;
    padding: 12px;
    border: 8px solid #8b5cf6;
    border-radius: 8px;
    background-color: #ede9fe;
    background-image: radial-gradient(circle, #ef4444 5px, transparent 6px);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: left top;
    font-size: 12px;
    color: #5b21b6;
  }

  .origin-padding-box { background-origin: padding-box; }
  .origin-content-box { background-origin: content-box; }
  .origin-border-box  { background-origin: border-box; }

  /* background-attachment：local 随内容滚动 */
  .attach-scroll,
  .attach-local {
    height: 110px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    background-image: radial-gradient(circle, #60a5fa 4px, transparent 5px);
    background-repeat: repeat;
    background-size: 24px 24px;
    background-position: left top;
  }
  .attach-scroll { background-attachment: scroll; }
  .attach-local  { background-attachment: local;  }

  /* ========== 2. 圆角示例 ========== */
  .radius-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .radius-box {
    width: 140px;
    height: 100px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  }

  .radius-1 { border-radius: 10px; }
  .radius-2 { border-radius: 50%; }
  .radius-3 { border-radius: 20px 0 20px 0; }
  .radius-4 { border-radius: 50% 50% 0 0; }
  .radius-5 { border-radius: 30px 10px 30px 10px / 10px 30px 10px 30px; }

  /* ========== 3. 阴影示例 ========== */
  .shadow-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 10px;
  }

  .shadow-box {
    width: 150px;
    height: 100px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #555;
  }

  /* 外阴影 */
  .shadow-outer { box-shadow: 4px 4px 12px rgba(0, 0, 0, .25); }

  /* 内阴影 */
  .shadow-inset {
    box-shadow: inset 4px 4px 10px rgba(0, 0, 0, .25),
                inset -4px -4px 10px rgba(255, 255, 255, .9);
    background: #eef2f7;
  }

  /* 多重阴影 */
  .shadow-multi {
    box-shadow: 0 0 0 3px #3b82f6,
                0 8px 20px rgba(59, 130, 246, .35);
  }

  /* 文字阴影示例 */
  .text-shadow-demo {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 16px 8px;
    font-size: 26px;
    font-weight: bold;
  }

  .ts-1 { color: #3b82f6; text-shadow: 2px 2px 0 #bfdbfe; }
  .ts-2 { color: #ef4444; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
  .ts-3 { color: #fff; text-shadow: 0 0 6px #f59e0b, 0 0 14px #f59e0b; }
  .ts-4 { color: #111; text-shadow: 0 1px 0 #fff, 0 2px 0 #ccc, 0 3px 4px rgba(0, 0, 0, .4); }

  /* ========== 4. 列表样式 ========== */
  .list-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
  }

  .list-grid ul, .list-grid ol {
    margin: 0;
    padding-left: 24px;
    min-width: 180px;
  }

  .list-square   { list-style: square inside; }
  .list-decimal  { list-style: decimal outside; }
  .list-roman    { list-style: upper-roman outside; }
  .list-none     { list-style: none; padding-left: 0; }
  .list-none li {
    padding-left: 24px;
    background-image: linear-gradient(90deg, #3b82f6, #8b5cf6);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 12px 12px;
    background-clip: content-box;
    border-radius: 2px;
    margin-bottom: 4px;
  }

  /* ========== 5. 表格样式 ========== */
  table {
    width: 100%;
    margin-bottom: 20px;
    font-size: 14px;
    background: #fff;
  }

  table th, table td {
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    text-align: left;
  }

  table thead th {
    background: #3b82f6;
    color: #fff;
  }

  .table-collapse {
    border-collapse: collapse;   /* 合并边框 */
    border-spacing: 0;
  }

  .table-separate {
    border-collapse: separate;   /* 分离边框 */
    border-spacing: 8px 6px;     /* 水平 8px，垂直 6px */
  }

  .table-separate th, .table-separate td {
    border-radius: 6px;
    border-color: #93c5fd;
  }

  /* ========== 6. 溢出处理 ========== */
  .overflow-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .ov-box {
    width: 200px;
    height: 110px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    background: #f9fafb;
  }

  .ov-visible { overflow: visible; }   /* 默认，会溢出 */
  .ov-hidden  { overflow: hidden; }
  .ov-scroll  { overflow: scroll; }
  .ov-auto    { overflow: auto; }
  .ov-x-hidden-y-auto {
    overflow-x: hidden;
    overflow-y: auto;
    /* 为了演示 x 隐藏效果，内部放一个很宽的方块 */
  }
  .ov-x-hidden-y-auto .wide {
    width: 400px;
    height: 30px;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    border-radius: 4px;
    margin-bottom: 10px;
  }

  /* 让演示可读 */
  .note {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
  }

  code {
    background: #f3f4f6;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: Consolas, Monaco, monospace;
    color: #dc2626;
  }
</style>
</head>
<body>

  <h1>CSS3 基础样式综合示例</h1>
  <p class="subtitle">背景 · 圆角 · 阴影 · 列表 · 表格 · 溢出</p>

  <!-- ================= 1. 背景 ================= -->
  <section class="section">
    <h2>一、背景 background 相关属性</h2>

    <div class="bg-grid">
      <div class="bg-box bg-color">background-color</div>
      <div class="bg-box bg-gradient">background-image (渐变)</div>
      <div class="bg-box bg-repeat">repeat-y 纵向重复</div>
      <div class="bg-box bg-cover">position:center / size:cover</div>
      <div class="bg-box bg-contain">size:contain</div>
    </div>

    <div class="bg-clip-demo">
      <div class="clip-box clip-border-box">background-clip: border-box</div>
      <div class="clip-box clip-padding-box">background-clip: padding-box</div>
      <div class="clip-box clip-content-box">background-clip: content-box</div>
    </div>

    <div class="bg-clip-demo">
      <div class="origin-box origin-border-box">origin: border-box</div>
      <div class="origin-box origin-padding-box">origin: padding-box</div>
      <div class="origin-box origin-content-box">origin: content-box</div>
    </div>

    <div class="bg-clip-demo">
      <div class="attach-scroll">
        <p><strong>attachment: scroll</strong>（背景不随内容滚动）</p>
        <p>滚动这段文字，背景点阵保持不动......</p>
        <p>为了能滚动，这里多写一些内容。</p>
        <p>继续滚动，观察背景。</p>
        <p>内容越多，对比越明显。</p>
        <p>这里是最后一段。</p>
      </div>
      <div class="attach-local">
        <p><strong>attachment: local</strong>（背景随内容滚动）</p>
        <p>滚动这段文字，背景点阵一起移动......</p>
        <p>为了能滚动，这里多写一些内容。</p>
        <p>继续滚动，观察背景。</p>
        <p>内容越多，对比越明显。</p>
        <p>这里是最后一段。</p>
      </div>
    </div>
    <p class="note">提示：两个盒子内容完全一样，只有 <code>background-attachment</code> 不同。滚动时一个背景不动，一个背景跟着动。</p>
  </section>

  <!-- ================= 2. 圆角 ================= -->
  <section class="section">
    <h2>二、边框圆角 border-radius</h2>
    <div class="radius-grid">
      <div class="radius-box radius-1">border-radius: 10px</div>
      <div class="radius-box radius-2">border-radius: 50%</div>
      <div class="radius-box radius-3">20px 0 20px 0</div>
      <div class="radius-box radius-4">50% 50% 0 0</div>
      <div class="radius-box radius-5">斜杠写法<br>水平/垂直半径</div>
    </div>
  </section>

  <!-- ================= 3. 阴影 ================= -->
  <section class="section">
    <h2>三、阴影 box-shadow / text-shadow</h2>

    <div class="shadow-grid">
      <div class="shadow-box shadow-outer">外阴影</div>
      <div class="shadow-box shadow-inset">内阴影 inset</div>
      <div class="shadow-box shadow-multi">多重阴影</div>
    </div>

    <div class="text-shadow-demo">
      <span class="ts-1">立体</span>
      <span class="ts-2">描边</span>
      <span class="ts-3">发光</span>
      <span class="ts-4">浮雕</span>
    </div>
  </section>

  <!-- ================= 4. 列表 ================= -->
  <section class="section">
    <h2>四、列表样式 list-style</h2>
    <div class="list-grid">
      <ul class="list-square">
        <li>list-style: square inside</li>
        <li>项目二</li>
        <li>项目三</li>
      </ul>

      <ol class="list-decimal">
        <li>list-style: decimal</li>
        <li>项目二</li>
        <li>项目三</li>
      </ol>

      <ol class="list-roman">
        <li>list-style: upper-roman</li>
        <li>项目二</li>
        <li>项目三</li>
      </ol>

      <ul class="list-none">
        <li>list-style: none（自定义标记）</li>
        <li>项目二</li>
        <li>项目三</li>
      </ul>
    </div>
  </section>

  <!-- ================= 5. 表格 ================= -->
  <section class="section">
    <h2>五、表格样式 border-collapse / border-spacing</h2>

    <p style="font-size:14px;color:#555;">① <code>border-collapse: collapse;</code>（合并边框）</p>
    <table class="table-collapse">
      <thead>
        <tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
      </thead>
      <tbody>
        <tr><td>张三</td><td>25</td><td>北京</td></tr>
        <tr><td>李四</td><td>30</td><td>上海</td></tr>
      </tbody>
    </table>

    <p style="font-size:14px;color:#555;">② <code>border-collapse: separate; border-spacing: 8px 6px;</code>（分离边框）</p>
    <table class="table-separate">
      <thead>
        <tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
      </thead>
      <tbody>
        <tr><td>王五</td><td>28</td><td>广州</td></tr>
        <tr><td>赵六</td><td>22</td><td>深圳</td></tr>
      </tbody>
    </table>
  </section>

  <!-- ================= 6. 溢出 ================= -->
  <section class="section">
    <h2>六、溢出处理 overflow / overflow-x / overflow-y</h2>
    <div class="overflow-grid">
      <div class="ov-box ov-visible">
        <strong>overflow: visible</strong><br>
        内容超出后会溢出到外面，覆盖到相邻元素之上，这段文字故意写得很长很长很长很长很长。
      </div>

      <div class="ov-box ov-hidden">
        <strong>overflow: hidden</strong><br>
        超出部分被裁剪隐藏，看不到滚动条，这段文字故意写得很长很长很长很长很长。
      </div>

      <div class="ov-box ov-scroll">
        <strong>overflow: scroll</strong><br>
        无论是否需要，都会显示横竖滚动条，这段文字故意写得很长很长很长很长很长。
      </div>

      <div class="ov-box ov-auto">
        <strong>overflow: auto</strong><br>
        需要时才出现滚动条，这段文字故意写得很长很长很长很长很长很长。
      </div>

      <div class="ov-box ov-x-hidden-y-auto">
        <strong>overflow-x: hidden; overflow-y: auto;</strong>
        <div class="wide">很宽的内容（水平被隐藏）</div>
        <p>垂直方向内容很多时会自动出现纵向滚动条，这里再补一些文字以触发滚动：一、二、三、四、五、六、七、八、九、十。</p>
      </div>
    </div>
  </section>

</body>
</html>
相关推荐
技术风向解码者2 小时前
安卓跨端选型：为什么优先看 Kuikly
android
科小怪2 小时前
大肥鱼桌宠下载（2026最新版）：在安卓桌面上养一条会走会弹会碎碎念的胖鱼
android
qq3621967052 小时前
安卓安装包完整性校验：怎么确认下载的 APK 没被动过手脚
android
Nymph_Zhu2 小时前
pdf转换markdown预览及内容互相点击定位
前端·pdf·vue3·markdown·element-plus
计算机魔术师2 小时前
Google 一天蒸发5000亿，Reddit 靠 AI 训练喂得饱自己却饿死
前端
小大宇2 小时前
Vue知识点-ElementPlus-05 输入框
前端·javascript·vue.js
东鹏特饮2 小时前
本机状态监控页面html
运维·css·html·css3
FLJwu2 小时前
《运动相机硬件防护选型实战》专栏｜第二篇（PPTC 自恢复保险丝）
android·经验分享·数码相机·1024程序员节·运动相机
l1m0_2 小时前
AI设计工具有哪些？Paico、Pixso AI、墨刀AI、Lovable、Codex怎么选
前端·人工智能·ai·设计·墨刀·codex·pixso
web打印社区2 小时前
Lodop在Edge和双核浏览器-先分清内核
前端·javascript·edge·pdf·ecmascript·html5
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF05几个好用的ip纯净度检测网站06昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战07苹果iPA游戏软件资源下载网站08蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接09CVE-2026-91403 高危漏洞预警：Java JSSE 信任链被攻破 全场景修复方案与Linux系统级彻底清理实操10Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）