php如何安全地处理用户输入数据?php用户输入数据过滤与验证

答案是安全处理PHP用户输入需遵循过滤与验证结合、参数化查询、输出转义等原则。首先对所有外部数据进行即时验证和过滤,使用filter_var()校验数据类型并清理非法字符,确保输入合法;其次在输出时使用htmlspecialchars()防止XSS攻击,将特殊字符转为HTML实体;最关键的是采用PDO或MySQLi的参数化查询防御SQL注入,通过预处理语句分离SQL结构与数据,杜绝恶意代码执行;同时针对文件上传、CSRF等风险实施白名单校验、令牌机制等深度防御措施,构建多层次安全体系。

php如何安全地处理用户输入数据?php用户输入数据过滤与验证

在PHP应用开发中,安全地处理用户输入数据,核心就在于“不信任任何来自外部的数据”。这意味着我们需要对所有用户提交的信息进行严格的过滤和验证,确保它们符合预期的格式、类型和安全标准,才能进一步处理或存储。这是一个基本原则,也是构建健壮、安全应用的基础。

解决方案

处理PHP用户输入数据的安全问题,其实是一个多层次、系统性的工程。它远不止是简单地调用几个函数那么直接,更需要一种防御性的思维模式。

首先,我们得明确过滤和验证的区别。验证 (Validation) 是确认数据是否符合我们预设的规则,比如一个邮箱地址是否是合法的格式,一个年龄是否在合理的区间内。如果数据不符合,就应该拒绝它。而过滤 (Filtering / Sanitization) 则是清理或转换数据,移除其中潜在的恶意或不必要的部分,使其变得“干净”或“安全”,例如去除HTML标签,或者转义特殊字符。两者相辅相成,缺一不可。

具体到实践,我通常会这样做:

立即学习PHP免费学习笔记(深入)”;

  1. 即时验证与过滤: 当数据一进入应用层,比如通过

    $_GET

    $_POST

    $_REQUEST

    甚至

    $_FILES

    接收到时,就立即进行初步的验证和过滤。对于字符串,我会考虑使用

    trim()

    去除首尾空白,然后根据预期用途选择

    filter_var()

    配合

    FILTER_SANITIZE_STRING

    (尽管在PHP 8.1+中已废弃,推荐使用

    htmlspecialchars()

    或自定义清理),或者直接针对特定类型如

    FILTER_SANITIZE_EMAIL

    FILTER_SANITIZE_URL

    。数字类型则用

    FILTER_VALIDATE_INT

    FILTER_VALIDATE_FLOAT

    ,如果验证通过,再进行类型转换。

  2. 严格的数据类型检查: PHP是弱类型语言,这在方便的同时也带来了隐患。明确地将用户输入转换为期望的数据类型至关重要。例如,期望一个整数时,即使通过

    filter_var($input, FILTER_VALIDATE_INT)

    验证了,我还是会再用

    intval()

    或进行强制类型转换,确保后续操作不会因为类型不匹配而产生意外。

  3. 使用参数化查询(Prepared Statements): 这是防御SQL注入的“黄金法则”。无论使用PDO还是MySQLi,都必须用参数化查询来与数据库交互。它将SQL语句的结构和数据彻底分离,数据库驱动会确保数据不会被解释为可执行的SQL代码。任何直接将用户输入拼接到SQL查询中的行为,都是在为自己挖坑。

  4. 针对输出的转义: 过滤和验证是针对“输入”的,而转义 (Escaping) 则是针对“输出”的。当你将用户数据展示到HTML页面、写入日志文件、或者作为命令行参数时,都需要根据输出上下文进行相应的转义。最常见的莫过于防止XSS攻击,这时

    htmlspecialchars()

    htmlentities()

    就派上用场了,它将HTML特殊字符转换为实体,使浏览器无法将其解析为可执行的HTML或JavaScript。

  5. 文件上传的深度防御: 文件上传是一个高风险区域。除了验证文件类型(MIME类型和扩展名白名单,而非黑名单)、大小外,更要关注文件内容。比如,图片文件可以用

    getimagesize()

    检查是否真的是图片。更重要的是,上传的文件应该存储在Web根目录之外,并生成一个随机且唯一的文件名,以防路径遍历和文件覆盖。

  6. CSRF保护: 对于会改变服务器状态的操作(如表单提交、删除数据),我会加入CSRF(跨站请求伪造)令牌。每次表单生成时,都包含一个随机、有时效性的隐藏字段,并在提交时验证这个令牌。

说到底,没有银弹,安全是一个持续对抗的过程。我们需要时刻保持警惕,并不断更新自己的防御策略。

常见的安全风险有哪些,以及未经验证的用户输入如何在PHP应用中导致这些问题?

未经验证的用户输入,简直是打开了潘多拉的魔盒,它能让PHP应用面临各种各样的攻击,轻则数据泄露,重则整个系统被控制。这绝不是危言耸听,而是无数血淋淋的案例总结出来的教训。

最常见的风险包括:

  • SQL注入 (SQL Injection): 这是最臭名昭著的攻击之一。当用户输入被直接拼接到SQL查询中,攻击者可以注入恶意的SQL代码,从而绕过认证、读取、修改甚至删除数据库中的所有数据。例如,一个登录表单,如果用户输入
    ' OR '1'='1

    ,而你的查询是

    SELECT * FROM users WHERE username='$username' AND password='$password'

    ,那么这个恶意输入就能让查询条件永远为真,无需密码即可登录。

  • 跨站脚本攻击 (Cross-Site Scripting, XSS): 当用户输入(如评论、留言)包含恶意脚本(通常是JavaScript),并且这些脚本在未经转义的情况下被输出到其他用户的浏览器中时,XSS就发生了。攻击者可以窃取用户的Cookie(会话劫持)、修改页面内容、重定向用户,甚至利用浏览器漏洞。
  • 跨站请求伪造 (Cross-Site Request Forgery, CSRF): 攻击者诱骗用户点击一个恶意链接或访问一个恶意网站,该网站会在用户不知情的情况下,以用户的身份向目标网站发送请求。如果目标网站没有CSRF令牌验证,就会执行这些恶意请求,比如修改用户密码、发送邮件等。
  • 文件包含漏洞 (File Inclusion Vulnerabilities, LFI/RFI): 如果PHP脚本允许用户输入作为文件路径的一部分来包含文件,攻击者可以利用本地文件包含 (LFI) 来读取服务器上的敏感文件(如
    /etc/passwd

    ),或者利用远程文件包含 (RFI) 来包含并执行远程服务器上的恶意脚本,从而完全控制服务器。

  • 命令注入 (Command Injection): 当PHP应用需要执行系统命令(如
    exec()

    shell_exec()

    system()

    )时,如果用户输入被直接作为命令参数,攻击者可以注入额外的命令,从而在服务器上执行任意操作。

  • 不安全的文件上传: 如果没有对上传文件的类型、大小、内容进行严格验证,攻击者可以上传恶意脚本文件(如PHP shell),然后通过访问这些文件来执行代码,获取服务器控制权。即使是看似无害的图片,也可能被植入恶意代码。
  • 会话劫持与会话固定 (Session Hijacking/Fixation): 如果会话ID在URL中传递、或者在登录前就分配了会话ID且未在登录后重新生成,攻击者可以通过窃取会话ID或诱骗用户使用预设的会话ID来冒充用户。

这些问题之所以发生,归根结底就是因为我们对“外部世界”不够警惕。任何来自用户、来自网络、来自文件系统的数据,都应该被视为潜在的威胁,直到它通过了我们的严格审查。

PHP中,

filter_var()

htmlspecialchars()

在处理用户输入时分别扮演什么角色?它们应该如何配合使用?

在PHP的安全实践中,

filter_var()

htmlspecialchars()

是两个非常核心但用途截然不同的函数。理解它们的职责和协作方式,是构建安全应用的关键一步。

filter_var()

的角色:

filter_var()

是PHP的过滤扩展(Filter Extension)的核心函数,它主要用于验证和清理(过滤)用户输入。它的设计理念是提供一个统一的接口来处理各种数据类型,无论是字符串、整数、浮点数、邮箱、URL,还是IP地址。

  • 验证: 当你使用
    FILTER_VALIDATE_*

    系列的过滤器时,

    filter_var()

    会检查输入数据是否符合特定的格式或规则。例如,

    filter_var($email, FILTER_VALIDATE_EMAIL)

    会判断一个字符串是否是合法的邮箱格式。如果通过验证,它会返回原始数据(或经过清理的数据,取决于过滤器);如果失败,则返回

    false

  • 清理(过滤): 当你使用
    FILTER_SANITIZE_*

    系列的过滤器时,

    filter_var()

    会从输入数据中移除或转义不安全的字符,使其变得“干净”。例如,

    filter_var($string, FILTER_SANITIZE_STRING)

    (在PHP 8.1+中已废弃,但其理念是移除或编码HTML标签及特殊字符)或

    filter_var($url, FILTER_SANITIZE_URL)

    会移除URL中非法字符。

filter_var()

的强大之处在于其灵活性和预定义的大量过滤器,它能帮助我们快速、有效地对各种类型的输入进行初步的审查和处理。

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包

动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版 508

查看详情 动态WEB网站中的PHP和MySQL:直观的QuickPro指南第2版

htmlspecialchars()

的角色:

htmlspecialchars()

的职责则更为专一和明确:它用于防止跨站脚本攻击 (XSS)。它的工作原理是将HTML中的特殊字符转换为HTML实体。

具体来说,它会转换以下五个字符:

  • &

    (ampersand) becomes

    &
  • "

    (double quote) becomes

    "

    (当设置了

    ENT_NOQUOTES

    时不会转换)

  • '

    (single quote) becomes

    '

    (只有当设置了

    ENT_QUOTES

    ENT_HTML5

    时才会转换)

  • <

    (less than) becomes

    <
  • >

    (greater than) becomes

    >

通过这种转换,浏览器就不会将这些字符解释为HTML标签或JavaScript代码,而是作为纯文本显示。

它们如何配合使用?

理解了各自的职责,它们的配合使用逻辑就非常清晰了:

  1. filter_var()

    用于处理“输入”: 当你从用户那里接收到数据时,首先使用

    filter_var()

    进行验证和初步的清理。比如,如果用户提交了一个邮箱地址,你首先用

    filter_var($email, FILTER_VALIDATE_EMAIL)

    来确认它是一个有效的邮箱格式。如果是一个可能包含HTML的文本区域,你可以用

    filter_var($text, FILTER_SANITIZE_FULL_SPECIAL_CHARS)

    (PHP 8.1+推荐)来初步处理。这个阶段是确保数据在进入你的业务逻辑和数据库之前是“合法”且“干净”的。

  2. htmlspecialchars()

    用于处理“输出”: 当你需要将之前从数据库中取出或经过处理的用户数据展示到HTML页面上时,就应该使用

    htmlspecialchars()

    。无论这些数据是否经过

    filter_var()

    的清理,在输出到浏览器之前,都应该再次进行

    htmlspecialchars()

    处理。这是因为即使数据在存储时是干净的,但如果在显示时没有转义,仍然可能被利用进行XSS攻击。例如,你从数据库中取出一个用户提交的评论,即便它在存储前已经过

    filter_var()

    处理,但在

    echo

    到网页上时,仍然需要

    echo htmlspecialchars($comment, ENT_QUOTES, 'UTF-8');

总结来说:

  • filter_var()

    关注数据的“内在质量”:它确保数据符合预期类型和格式,并移除或清理不必要的或恶意的部分,主要在数据进入系统时使用。

  • htmlspecialchars()

    关注数据的“输出安全”:它确保数据在作为HTML内容呈现时不会被浏览器误解为可执行代码,主要在数据输出到HTML页面时使用。

这两个函数不是互相替代的关系,而是互补的防御层。先用

filter_var()

进行输入验证和过滤,再用

htmlspecialchars()

进行输出转义,这是构建安全PHP应用的基本而强大的组合拳。

如何使用PHP的PDO或MySQLi实现参数化查询,从而有效防御SQL注入攻击?

在PHP中,防御SQL注入最可靠、最推荐的方法就是使用参数化查询(Prepared Statements)。无论是使用PHP的PDO(PHP Data Objects)扩展还是MySQLi扩展,其核心思想都是将SQL语句的结构与数据彻底分离。这意味着你先定义好SQL查询的骨架,然后“绑定”数据到这个骨架上,数据库驱动会确保这些数据只被视为数据,而不会被解释为SQL代码的一部分。

这就像是给数据库发送一份“填空题”和一份“答案”。数据库先拿到“填空题”(预处理的SQL语句),知道哪里是参数位,然后你再把“答案”(用户输入)给它。数据库不会把“答案”当成“题目”的一部分来执行。

使用PDO实现参数化查询

PDO提供了一个统一的接口来访问多种数据库,是现代PHP应用中推荐的数据库抽象层。

 PDO::ERRMODE_EXCEPTION, // 错误模式:抛出异常    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,     // 默认获取关联数组    PDO::ATTR_EMULATE_PREPARES   => false,                // 关闭模拟预处理(推荐,让数据库本身处理预处理)];try {    $pdo = new PDO($dsn, $user, $pass, $options);} catch (PDOException $e) {    throw new PDOException($e->getMessage(), (int)$e->getCode());}// 2. 用户输入(假设这是从表单获取的)$username = $_POST['username'] ?? '';$password = $_POST['password'] ?? ''; // 注意:密码应该哈希后存储和比较,这里仅作示例// 3. 准备SQL语句(使用占位符,可以是问号`?`或命名占位符`:name`)// 方式一:问号占位符$sql = "SELECT id, username FROM users WHERE username = ? AND password = ?";$stmt = $pdo->prepare($sql);// 4. 绑定参数并执行// execute() 方法的参数顺序必须与SQL语句中的问号占位符顺序一致$stmt->execute([$username, $password]); // 方式二:命名占位符(更清晰,尤其当参数多时)$sql_named = "SELECT id, username FROM users WHERE username = :username AND password = :password";$stmt_named = $pdo->prepare($sql_named);// 绑定参数:可以使用 bindParam() 或 bindValue()// bindParam() 绑定变量的引用,在 execute() 时才取值// bindValue() 绑定变量的值,立即取值$stmt_named->bindParam(':username', $username, PDO::PARAM_STR); // 明确指定参数类型$stmt_named->bindParam(':password', $password, PDO::PARAM_STR);$stmt_named->execute();// 或者更简洁地直接在 execute() 中传递关联数组// $stmt_named->execute([':username' => $username, ':password' => $password]);// 5. 获取结果$user = $stmt->fetch();if ($user) {    echo "用户 " . htmlspecialchars($user['username']) . " 登录成功!";} else {    echo "用户名或密码错误。";}// 示例:插入数据$email = $_POST['email'] ?? 'test@example.com';$insert_sql = "INSERT INTO users (username, password, email) VALUES (?, ?, ?)";$insert_stmt = $pdo->prepare($insert_sql);$insert_stmt->execute([$username, $password, $email]);echo "新用户注册成功!";?>

关键点:

  • $pdo->prepare($sql)

    :这是第一步,它告诉数据库准备好一个SQL查询模板。

  • $stmt->execute([...])

    $stmt->bindParam(...)

    后跟

    $stmt->execute()

    :这是第二步,将用户数据安全地传递给数据库。PDO会自动处理数据的转义,防止任何注入尝试。

  • PDO::ATTR_EMULATE_PREPARES => false

    :强烈推荐设置此选项。它确保PHP不会在客户端模拟预处理,而是将预处理工作完全交给数据库服务器处理,这通常更安全、更高效。

使用MySQLi实现参数化查询

MySQLi是PHP官方为MySQL数据库提供的增强接口,也支持参数化查询。

connect_errno) {    echo "Failed to connect to MySQL: " . $mysqli->connect_error;    exit();}// 2. 用户输入$username = $_POST['username'] ?? '';$password = $_POST['password'] ?? '';// 3. 准备SQL语句(使用问号`?`作为占位符)$sql = "SELECT id, username FROM users WHERE username = ? AND password = ?";$stmt = $mysqli->prepare($sql);// 检查是否成功准备if (!$stmt) {    echo "Prepare failed: (" . $mysqli->errno . ") " . $mysqli->error;    exit();}// 4. 绑定参数并执行// bind_param() 方法的第一个参数是一个字符串,指定每个参数的类型:// s = string (字符串)// i = integer (整数)// d = double (浮点数)// b = blob (二进制数据)$stmt->bind_param("ss", $username, $password); // "ss" 表示两个参数都是字符串// 执行预处理语句$stmt->execute();// 5. 获取结果$result = $stmt->get_result(); // 获取结果集if ($result->num_rows > 0) {    $user = $result->fetch_assoc();    echo "用户 " . htmlspecialchars($user['username']) . " 登录成功!";} else {    echo "用户名或密码错误。";}// 关闭语句和连接$stmt->close();$mysqli->close();?>

关键点:

  • $mysqli->prepare($sql)

    :同样是准备SQL语句。

  • $stmt->bind_param("ss", $username, $password)

    :这是MySQLi特有的绑定方式,第一个参数是类型字符串,后面跟着要绑定的变量。类型字符串非常重要,它告诉数据库这些参数应该被视为哪种数据类型。

  • $stmt->execute()

    :执行预处理语句。

  • $stmt->get_result()

    :对于

    SELECT

    查询,需要调用此方法来获取结果集。

无论选择PDO还是MySQLi,使用参数化查询都是防御SQL注入的基石。它将SQL语句和数据安全地隔离,从根本上杜绝了攻击者通过数据来改变查询逻辑的可能性。这是任何PHP开发者都必须掌握和实践的安全准则。

以上就是php如何安全地处理用户输入数据?php用户输入数据过滤与验证的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1273338.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月10日 15:36:24
下一篇 2025年12月10日 15:36:37

相关推荐

  • 网络进化!

    Web 应用程序从静态网站到动态网页的演变是由对更具交互性、用户友好性和功能丰富的 Web 体验的需求推动的。以下是这种范式转变的概述: 1. 静态网站(1990 年代) 定义:静态网站由用 HTML 编写的固定内容组成。每个页面都是预先构建并存储在服务器上,并且向每个用户传递相同的内容。技术:HT…

    2025年12月24日
    000
  • 为什么多年的经验让我选择全栈而不是平均栈

    在全栈和平均栈开发方面工作了 6 年多,我可以告诉您,虽然这两种方法都是流行且有效的方法,但它们满足不同的需求,并且有自己的优点和缺点。这两个堆栈都可以帮助您创建 Web 应用程序,但它们的实现方式却截然不同。如果您在两者之间难以选择,我希望我在两者之间的经验能给您一些有用的见解。 在这篇文章中,我…

    2025年12月24日
    000
  • 学会从头开始学习CSS,掌握制作基本网页框架的技巧

    从零开始学习CSS,掌握网页基本框架制作技巧 前言: 在现今互联网时代,网页设计和开发是一个非常重要的技能。而学习CSS(层叠样式表)是掌握网页设计的关键之一。CSS不仅可以为网页添加样式和布局,还可以为用户呈现独特且具有吸引力的页面效果。在本文中,我将为您介绍一些基本的CSS知识,以及一些常用的代…

    2025年12月24日
    200
  • 揭秘Web标准涵盖的语言:了解网页开发必备的语言范围

    在当今数字时代,互联网成为了人们生活中不可或缺的一部分。作为互联网的基本构成单位,网页承载着我们获取和分享信息的重要任务。而网页开发作为一门独特的技术,离不开一些必备的语言。本文将揭秘Web标准涵盖的语言,让我们一起了解网页开发所需的语言范围。 首先,HTML(HyperText Markup La…

    2025年12月24日
    000
  • 揭开Web开发的语言之谜:了解构建网页所需的语言有哪些?

    Web标准中的语言大揭秘:掌握网页开发所需的语言有哪些? 随着互联网的快速发展,网页开发已经成为人们重要的职业之一。而要成为一名优秀的网页开发者,掌握网页开发所需的语言是必不可少的。本文将为大家揭示Web标准中的语言大揭秘,介绍网页开发所需的主要语言。 HTML(超文本标记语言)HTML是网页开发的…

    2025年12月24日
    400
  • 常用的网页开发语言:了解Web标准的要点

    了解Web标准的语言要点:常见的哪些语言应用在网页开发中? 随着互联网的不断发展,网页已经成为人们获取信息和交流的重要途径。而要实现一个高质量、易用的网页,离不开一种被广泛接受的Web标准。Web标准的制定和应用,涉及到多种语言和技术,本文将介绍常见的几种语言在网页开发中的应用。 首先,HTML(H…

    2025年12月24日
    000
  • 网页开发中常见的Web标准语言有哪些?

    探索Web标准语言的世界:网页开发中常用的语言有哪些? 在现代社会中,互联网的普及程度越来越高,网页已成为人们获取资讯、娱乐、交流的重要途径。而网页的开发离不开各种编程语言的应用和支持。在这个虚拟世界的网络,有许多被广泛应用的标准化语言,用于为用户提供优质的网页体验。本文将探索网页开发中常用的语言,…

    2025年12月24日
    000
  • 深入探究Web标准语言的范围,涵盖了哪些语言?

    Web标准是指互联网上的各个网页所需遵循的一系列规范,确保网页在不同的浏览器和设备上能够正确地显示和运行。这些标准包括HTML、CSS和JavaScript等语言。本文将深入解析Web标准涵盖的语言范围。 首先,HTML(HyperText Markup Language)是构建网页的基础语言。它使…

    2025年12月24日
    000
  • 项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结

    项目实践:如何结合CSS和JavaScript打造优秀网页的经验总结 随着互联网的快速发展,网页设计已经成为了各行各业都离不开的一项技能。优秀的网页设计可以给用户留下深刻的印象,提升用户体验,增加用户的黏性和转化率。而要做出优秀的网页设计,除了对美学的理解和创意的运用外,还需要掌握一些基本的技能,如…

    2025年12月24日
    200
  • CSS 超链接属性解析:text-decoration 和 color

    CSS 超链接属性解析:text-decoration 和 color 超链接是网页中常用的元素之一,它能够在不同页面之间建立连接。为了使超链接在页面中有明显的标识和吸引力,CSS 提供了一些属性来调整超链接的样式。本文将重点介绍 text-decoration 和 color 这两个与超链接相关的…

    2025年12月24日
    000
  • 学完HTML和CSS之后我应该做什么?

    网页开发是一段漫长的旅程,但是掌握了HTML和CSS技能意味着你已经赢得了一半的战斗。这两种语言对于学习网页开发技能来说非常重要和基础。现在不可或缺的是下一个问题,学完HTML和CSS之后我该做什么呢? 对这些问题的答案可以分为2-3个部分,你可以继续练习你的HTML和CSS编码,然后了解在学习完H…

    2025年12月24日
    000
  • 聊聊怎么利用CSS实现波浪进度条效果

    本篇文章给大家分享css 高阶技巧,介绍一下如何使用css实现波浪进度条效果,希望对大家有所帮助! 本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我们…

    2025年12月24日 好文分享
    200
  • 巧用距离、角度及光影制作炫酷的 3D 文字特效

    如何利用 css 实现3d立体的数字?下面本篇文章就带大家巧用视觉障眼法,构建不一样的 3d 文字特效,希望对大家有所帮助! 最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果: 这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗? 不是特…

    2025年12月24日 好文分享
    000
  • CSS高阶技巧:实现图片渐隐消的多种方法

    将专注于实现复杂布局,兼容设备差异,制作酷炫动画,制作复杂交互,提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时,注重对技巧的挖掘,结合实际进行运用,欢迎大家关注。 正文从这里开始。 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: 立即学习“前端…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(一)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:给定一个元素,如何实现水平垂直居中?…

    2025年12月24日 好文分享
    300
  • 看看这些前端面试题,带你搞定高频知识点(二)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:页面导入样式时,使用 link 和 …

    2025年12月24日 好文分享
    200
  • 看看这些前端面试题,带你搞定高频知识点(三)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:清除浮动有哪些方式? 我:呃~,浮动…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(四)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:请你谈一下自适应(适配)的方案 我:…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(五)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:css 如何实现左侧固定 300px…

    2025年12月24日 好文分享
    000
  • css实现登录按钮炫酷效果(附代码实例)

    今天在网上看到一个炫酷的登录按钮效果;初看时感觉好牛掰;但是一点一点的抛开以后发现,并没有那么难;我会将全部代码贴出来;如果有不对的地方,大家指点一哈。 分析 我们抛开before不谈的话;其实原理和就是通过背景大小以及配合位置达到颜色渐变的效果。 text-transform: uppercase…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信