YII框架的Kafka支持是什么?YII框架如何使用Kafka?

YII框架需通过第三方库如ricmc/yii2-kafka集成Kafka,核心步骤包括安装php-rdkafka扩展与Composer包、配置生产者消费者组件、在控制器中发送消息及通过控制台命令实现持续消费;常见挑战有扩展兼容性、消息序列化、消费者进程管理与重复消费问题,最佳实践涵盖使用Supervisor守护进程、确保业务幂等性、手动提交位移、设置死信队列及结合YII事件机制解耦业务与消息发送;为提升可靠性,应配置acks=all、启用重试机制、采用本地事务持久化关键消息,并通过批量发送与异步处理优化性能。

yii框架的kafka支持是什么?yii框架如何使用kafka?

YII框架本身并没有内置对Kafka的直接支持,它更像是一个通用的PHP Web框架。这意味着,如果你想在YII应用中使用Kafka,通常需要借助社区提供的第三方PHP客户端库,然后将其集成到YII的组件体系中。核心思路是利用PHP的Kafka扩展(如

php-rdkafka

)或基于此扩展封装的更高层库,来处理消息的生产与消费。

解决方案

要在YII框架中使用Kafka,最常见的做法是引入一个成熟的Kafka客户端库,并将其配置为YII的应用程序组件。这里以

ricmc/yii2-kafka

为例,因为它是一个针对YII2框架封装的库,使用起来会比较顺手。

1. 安装依赖:首先,确保你的PHP环境安装了

php-rdkafka

扩展。这是底层驱动。然后,通过Composer安装YII2的Kafka组件:

composer require ricmc/yii2-kafka

2. 配置应用组件:在YII应用的配置文件(通常是

config/web.php

config/console.php

,取决于你在哪里使用Kafka)中,添加或修改

components

部分:

// config/web.php 或 config/console.phpreturn [    'components' => [        // ... 其他组件配置        'kafka' => [            'class' => 'ricmcyii2_kafkaKafka',            'brokerList' => 'localhost:9092', // Kafka broker 地址,可以是多个,用逗号分隔            'producer' => [                'metadata.broker.list' => 'localhost:9092',                // 更多生产者配置,例如:                // 'acks' => 'all', // 确保所有副本都收到消息才算成功                // 'retries' => 3, // 失败重试次数                // 'compression.codec' => 'snappy', // 消息压缩            ],            'consumer' => [                'metadata.broker.list' => 'localhost:9092',                'group.id' => 'my-yii-group', // 消费者组ID                // 更多消费者配置,例如:                // 'auto.offset.reset' => 'earliest', // 没有历史位移时从最早开始消费            ],        ],    ],    // ...];

3. 消息生产(Producer):在你的控制器、服务层或任何需要发送消息的地方,可以通过YII的DI容器访问

kafka

组件,然后使用其生产者实例发送消息。

use Yii;// 假设在某个控制器动作中public function actionSendMessage(){    $topicName = 'my_test_topic';    $messagePayload = json_encode(['event' => 'user_registered', 'user_id' => 123]);    $messageKey = 'user-123'; // 可选,用于确保相同key的消息发送到同一个分区    try {        /** @var ricmcyii2_kafkaKafka $kafka */        $kafka = Yii::$app->kafka;        $producer = $kafka->getProducer();        // 发送消息        $producer->send($topicName, $messagePayload, $messageKey);        Yii::info("消息发送成功到 {$topicName}: {$messagePayload}");        return $this->asJson(['status' => 'success', 'message' => 'Message sent.']);    } catch (Exception $e) {        Yii::error("发送Kafka消息失败: " . $e->getMessage());        return $this->asJson(['status' => 'error', 'message' => 'Failed to send message.']);    }}

4. 消息消费(Consumer):消费者通常作为独立的守护进程或YII的控制台命令运行。这能确保它们持续监听Kafka主题并处理消息。

首先,创建一个控制台命令(例如

commands/KafkaConsumerController.php

):

kafka;        $consumer = $kafka->getConsumer();        $consumer->subscribe([$topic]); // 订阅一个或多个主题        echo "开始监听主题: {$topic}n";        while (true) {            try {                $message = $consumer->consume(120 * 1000); // 消费消息,超时时间2分钟(毫秒)                switch ($message->err) {                    case RD_KAFKA_RESP_ERR_NO_ERROR:                        // 成功收到消息                        echo "收到消息: 主题 {$message->topic_name}, 分区 {$message->partition}, 偏移量 {$message->offset}n";                        echo "Key: " . $message->key . "n";                        echo "Payload: " . $message->payload . "n";                        // 处理消息的业务逻辑                        $data = json_decode($message->payload, true);                        if ($data && isset($data['event'])) {                            echo "处理事件: " . $data['event'] . "n";                            // 例如:根据事件类型调用不同的服务                        }                        // 手动提交位移,确保消息处理完成后再提交                        $consumer->commit($message);                        break;                    case RD_KAFKA_RESP_ERR__PARTITION_EOF:                        // 到达分区末尾,没有新消息                        // echo "到达分区末尾,等待新消息...n";                        break;                    case RD_KAFKA_RESP_ERR__TIMED_OUT:                        // 消费超时,没有收到消息                        // echo "消费超时,继续等待...n";                        break;                    default:                        // 其他错误                        Yii::error("Kafka消费错误: " . $message->errstr() . " (错误码: " . $message->err . ")");                        break;                }            } catch (Exception $e) {                Yii::error("Kafka消费异常: " . $e->getMessage());                // 考虑如何处理异常,例如记录日志,或者退出以便外部进程管理器重启                sleep(5); // 简单粗暴的等待,实际生产环境应更优雅            }        }        return ExitCode::OK;    }}

然后,在命令行中运行这个消费者:

php yii kafka-consumer/consume my_test_topic

在生产环境中,你需要使用

supervisor

systemd

或其他进程管理工具来守护这个消费者进程,确保它持续运行并在崩溃时自动重启

在YII应用中集成Kafka时,有哪些常见的挑战和最佳实践?

将Kafka引入YII应用,这本身就意味着引入了分布式系统的复杂性,所以挑战是必然的,但也有应对之道。

常见的挑战:

PHP-rdkafka扩展的安装与兼容性: 这个底层C扩展的安装过程有时会比较棘手,尤其是在不同的操作系统或PHP版本下。它对librdkafka库的版本也有要求,稍有不慎就可能导致编译失败或运行时错误。消息序列化与反序列化: Kafka只传输字节流,因此消息内容的格式(JSON、Protobuf、Avro等)需要生产者和消费者双方约定好。在YII中,你可能需要确保发送前正确编码,接收后正确解码,这涉及到数据结构的一致性维护。消费者进程管理: PHP脚本通常是短生命周期的,而Kafka消费者需要长时间运行。如何可靠地启动、停止、监控和重启消费者进程,是YII应用(尤其是Web应用)需要面对的挑战。直接在Web请求中启动消费者是不可行的。消息幂等性与重复消费: Kafka提供“至少一次”的交付保证,这意味着在某些情况下(如消费者故障恢复),消息可能会被重复消费。你的YII业务逻辑必须设计成对重复消息具备幂等性,即多次处理同一条消息不会产生副作用。错误处理与死信队列(DLQ): 消息处理失败是常态。如何优雅地捕获处理异常、记录失败消息、并将无法处理的消息路由到死信队列以便后续人工干预或重试,是保障系统健壮性的关键。异步处理的复杂性: 虽然Kafka本身是异步的,但在YII的PHP环境中,要实现真正的非阻塞异步发送或消费,需要对PHP的协程或异步IO(如Swoole、ReactPHP)有更深的理解和集成,这会增加系统的复杂度。

最佳实践:

版本匹配与环境一致性: 确保

php-rdkafka

扩展、

librdkafka

库以及Kafka集群的版本相互兼容。在开发、测试、生产环境保持一致的配置。标准化消息格式: 统一使用JSON作为消息载荷格式,因为它易于读写和调试。对于更复杂或性能要求高的场景,可以考虑Protobuf或Avro,但会增加序列化/反序列化的复杂度。始终包含一个

type

event

字段来标识消息类型。独立消费者服务: 将Kafka消费者逻辑封装成YII的控制台命令,并使用

supervisor

systemd

或Kubernetes等工具进行进程管理。为每个消费者组或主题运行独立的消费者实例,确保它们可以独立扩展和故障恢复。业务逻辑的幂等性设计: 在处理消息的业务逻辑中,引入唯一标识符(如订单ID、操作ID),并在执行操作前检查该ID是否已处理过。例如,利用数据库的唯一索引或乐观锁来避免重复处理。健壮的错误处理:在消费者回调函数中加入

try-catch

块,捕获业务逻辑异常。对于可重试的瞬时错误(如数据库连接失败),可以考虑短时间等待后重试。对于不可重试的永久性错误(如数据格式错误),将消息发送到专门的死信队列(Dead Letter Queue, DLQ),并记录详细日志,以便人工介入。批量发送与异步发送: 生产者端可以配置

linger.ms

batch.num.messages

来批量发送消息,减少网络往返次数,提高吞吐量。默认情况下,

ricmc/yii2-kafka

等库已经支持异步发送,避免阻塞主线程。消费者位移管理: 优先使用手动提交位移(

$consumer->commit($message)

),确保消息被成功处理后再提交,而不是依赖自动提交。这能有效避免消息丢失或重复消费。监控与告警: 监控Kafka集群的健康状况、主题积压情况、消费者组的消费滞后(lag)以及消费者进程的运行状态。集成到你的YII应用监控体系中,及时发现问题并告警。

如何利用YII的事件机制与Kafka消息队列协同工作?

YII的事件机制与Kafka消息队列的结合,是一个非常优雅的解耦方式,它能让你的业务核心逻辑保持纯粹,而消息的发布则成为一种“副作用”或“通知”。这种模式的核心在于将Kafka消息的发送逻辑,从业务处理流程中剥离出来,放到一个事件监听器中。

工作原理:

定义YII事件: 在你的业务模型或服务中,定义一个或多个事件。例如,当一个用户注册成功时,你可以触发一个

UserRegisteredEvent

触发YII事件: 在业务逻辑执行完毕,且核心数据(如用户数据)已持久化到数据库后,立即触发这个YII事件。创建事件监听器: 编写一个事件监听器类,这个类监听你定义的YII事件。在监听器中发送Kafka消息: 当监听器捕获到事件时,它负责将与该事件相关的数据封装成Kafka消息的载荷,并通过Kafka生产者发送到指定的主题。

好处:

解耦: 业务逻辑(如用户注册、订单创建)不再直接依赖Kafka客户端。它只需要关心自身的业务流程,并触发一个事件。发送Kafka消息的细节被封装在监听器中。提高响应速度: 如果Kafka发送操作是同步的,可能会阻塞主业务流程。通过事件机制,你可以将Kafka发送逻辑放在一个独立的监听器中,即使监听器内部是同步发送,它也发生在主业务逻辑之后,对用户请求的响应影响较小。如果结合异步监听器(虽然YII原生不直接支持,但可以扩展),效果会更好。可扩展性: 当你需要对某个业务事件添加新的通知方式(例如,除了Kafka,还要发送邮件或短信),你只需要添加一个新的事件监听器,而无需修改原有的业务代码。可测试性: 核心业务逻辑在不涉及Kafka的情况下更容易测试。你可以独立测试事件的触发和监听器的功能。

示例:用户注册后发送Kafka消息

定义事件(可选,但推荐):

如知AI笔记 如知AI笔记

如知笔记——支持markdown的在线笔记,支持ai智能写作、AI搜索,支持DeepseekR1满血大模型

如知AI笔记 27 查看详情 如知AI笔记

// app/events/UserRegisteredEvent.phpnamespace appevents;use yiibaseEvent;use appmodelsUser; // 假设有User模型class UserRegisteredEvent extends Event{    public $user; // 传递注册的用户对象}

在用户注册服务中触发事件:

// app/services/UserService.phpnamespace appservices;use appmodelsUser;use appeventsUserRegisteredEvent;use Yii;class UserService{    public function registerUser($username, $password)    {        $user = new User();        $user->username = $username;        $user->password_hash = Yii::$app->security->generatePasswordHash($password);        // ... 其他用户属性        if ($user->save()) {            // 用户保存成功后,触发事件            $event = new UserRegisteredEvent();            $event->user = $user;            Yii::$app->trigger(UserRegisteredEvent::class, $event); // 使用类名作为事件名            return $user;        }        return null;    }}

创建事件监听器:

// app/listeners/KafkaUserListener.phpnamespace applisteners;use yiibaseEvent;use appeventsUserRegisteredEvent;use Yii;class KafkaUserListener{    public static function handleUserRegistered(UserRegisteredEvent $event)    {        /** @var ricmcyii2_kafkaKafka $kafka */        $kafka = Yii::$app->kafka;        $producer = $kafka->getProducer();        $topicName = 'user_events';        $messagePayload = json_encode([            'event_type' => 'user_registered',            'user_id' => $event->user->id,            'username' => $event->user->username,            'timestamp' => time(),        ]);        $messageKey = (string)$event->user->id;        try {            $producer->send($topicName, $messagePayload, $messageKey);            Yii::info("用户注册事件发送到Kafka: {$messagePayload}");        } catch (Exception $e) {            Yii::error("发送用户注册Kafka消息失败: " . $e->getMessage());            // 这里可以考虑将失败的消息记录到数据库或另一个队列,以便后续重试        }    }}

在应用配置中注册事件监听器:

// config/web.php 或 config/console.phpreturn [    // ...    'bootstrap' => [        // ...        function () {            // 注册事件监听器            Yii::$app->on(                appeventsUserRegisteredEvent::class,                [applistenersKafkaUserListener::class, 'handleUserRegistered']            );        },    ],    // ...];

通过这种方式,你的

UserService

无需知道Kafka的存在,它只负责触发

UserRegisteredEvent

。而

KafkaUserListener

则专注于将这个事件转化为Kafka消息并发送,实现了关注点分离。

针对Kafka消息的可靠性与性能,YII开发者可以采取哪些优化策略?

在YII框架中使用Kafka,无论是生产还是消费,可靠性和性能都是需要重点考量的因素。以下是一些可以采取的优化策略:

消息可靠性策略:

生产者端的

acks

配置:

acks=0

:发送即忘,不等待任何确认,性能最高,可靠性最差。适用于对消息丢失不敏感的场景(如日志)。

acks=1

:等待leader副本确认,性能和可靠性平衡。leader收到消息即可。

acks=all

(或

-1

):等待所有ISR(In-Sync Replicas)副本确认,可靠性最高,但性能略有牺牲。推荐用于关键业务消息。在YII的Kafka组件配置中,将

producer.acks

设置为

all

-1

生产者重试机制:

配置

retries

参数,允许生产者在发送失败时自动重试。结合

retry.backoff.ms

设置重试间隔。这能处理临时的网络波动或Kafka broker故障。但要注意,重试可能导致消息重复,因此业务逻辑需要幂等性。

本地事务与消息持久化:

对于极度重要的消息,可以采用“本地事务+消息持久化”模式。即在发送Kafka消息前,先将消息内容和状态(如“待发送”)持久化到本地数据库的事务中。当数据库事务提交成功后,再异步地将消息发送到Kafka。如果Kafka发送失败,可以通过定时任务扫描数据库中“待发送”状态的消息进行重试。这能确保消息即使在应用崩溃时也不会丢失。

消费者位移手动提交:

避免使用Kafka的自动位移提交。在消费者处理完一条消息并成功持久化其业务结果后,再手动提交该消息的位移(

$consumer->commit($message)

)。这确保了“至少一次”的交付语义,即使消费者崩溃,重启后也会从上次成功提交的位移处开始,避免消息丢失。

死信队列(DLQ):

为消费者配置死信队列。当消息处理失败(例如,数据格式错误、业务逻辑异常且无法重试)时,不提交该消息的位移,而是将其发送到另一个专门的“死信”主题。可以有专门的死信消费者来处理这些消息,进行人工干预、分析原因或进行数据修复后重新投递。

消息性能优化策略:

生产者批量发送(Batching):配置

linger.ms

(等待时间,毫秒)和

batch.num.messages

(批次大小,消息数量)。生产者不会立即发送每条消息,而是等待一段时间或累积到一定数量后再一起发送。这显著减少了网络往返次数和CPU开销

以上就是YII框架的Kafka支持是什么?YII框架如何使用Kafka?的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月7日 10:33:30
下一篇 2025年11月7日 10:40:15

相关推荐

  • 如何用dom2img解决网页打印样式不显示的问题?

    用dom2img解决网页打印样式不显示的问题 想将网页以所见即打印的的效果呈现,需要采取一些措施,特别是在使用了bootstrap等大量采用外部css样式的框架时。 问题根源 在常规打印操作中,浏览器通常会忽略css样式等非必要的页面元素,导致打印出的结果与网页显示效果不一致。这是因为打印机制只识别…

    2025年12月24日
    800
  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    800
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 如何选择元素个数不固定的指定类名子元素?

    灵活选择元素个数不固定的指定类名子元素 在网页布局中,有时需要选择特定类名的子元素,但这些元素的数量并不固定。例如,下面这段 html 代码中,activebar 和 item 元素的数量均不固定: *n *n 如果需要选择第一个 item元素,可以使用 css 选择器 :nth-child()。该…

    2025年12月24日
    200
  • 使用 SVG 如何实现自定义宽度、间距和半径的虚线边框?

    使用 svg 实现自定义虚线边框 如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片,但是这种方法存在引入外部资源、性能低下的缺点。 为了避免上述问题,可以使用 svg(可缩放矢量图形)来创建纯代码实现。一种方…

    2025年12月24日
    100
  • Bootstrap 中如何让文字浮于阴影之上?

    文字浮于阴影之上 文中提到的代码片段中 元素中的文字被阴影元素 所遮挡,如何让文字显示在阴影之上? bootstrap v3和v5在处理此类问题方面存在差异。 解决方法 在bootstrap v5中,给 元素添加以下css样式: .banner-content { position: relativ…

    2025年12月24日
    000
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 如何利用 CSS 选中激活标签并影响相邻元素的样式?

    如何利用 css 选中激活标签并影响相邻元素? 为了实现激活标签影响相邻元素的样式需求,可以通过 :has 选择器来实现。以下是如何具体操作: 对于激活标签相邻后的元素,可以在 css 中使用以下代码进行设置: li:has(+li.active) { border-radius: 0 0 10px…

    2025年12月24日
    100
  • 如何模拟Windows 10 设置界面中的鼠标悬浮放大效果?

    win10设置界面的鼠标移动显示周边的样式(探照灯效果)的实现方式 在windows设置界面的鼠标悬浮效果中,光标周围会显示一个放大区域。在前端开发中,可以通过多种方式实现类似的效果。 使用css 使用css的transform和box-shadow属性。通过将transform: scale(1.…

    2025年12月24日
    200
  • 为什么我的 Safari 自定义样式表在百度页面上失效了?

    为什么在 Safari 中自定义样式表未能正常工作? 在 Safari 的偏好设置中设置自定义样式表后,您对其进行测试却发现效果不同。在您自己的网页中,样式有效,而在百度页面中却失效。 造成这种情况的原因是,第一个访问的项目使用了文件协议,可以访问本地目录中的图片文件。而第二个访问的百度使用了 ht…

    2025年12月24日
    000
  • Bootstrap 5:如何将文字置于阴影之上?

    文字重叠阴影 在 bootstrap 5 中,将文字置于阴影之上时遇到了困难。在 bootstrap 3 中,此问题并不存在,但升级到 bootstrap 5 后却无法实现。 解决方案 为了解决这个问题,需要给 元素添加以下样式: .banner-content { position: relati…

    2025年12月24日
    400
  • 如何用前端实现 Windows 10 设置界面的鼠标移动探照灯效果?

    如何在前端实现 Windows 10 设置界面中的鼠标移动探照灯效果 想要在前端开发中实现 Windows 10 设置界面中类似的鼠标移动探照灯效果,可以通过以下途径: CSS 解决方案 DEMO 1: Windows 10 网格悬停效果:https://codepen.io/tr4553r7/pe…

    2025年12月24日
    000
  • 使用CSS mask属性指定图片URL时,为什么浏览器无法加载图片?

    css mask属性未能加载图片的解决方法 使用css mask属性指定图片url时,如示例中所示: mask: url(“https://api.iconify.design/mdi:apple-icloud.svg”) center / contain no-repeat; 但是,在网络面板中却…

    2025年12月24日
    000
  • Bootstrap 5 如何将文字置于阴影上方?

    如何在 bootstrap 5 中让文字位于阴影上方? 在将网站从 bootstrap 3 升级到 bootstrap 5 后,用户遇到一个问题:文字内容无法像以前那样置于阴影层之上。 解决方案: 为了将文字置于阴影层上方,需要给 banner-content 元素添加以下 css 样式: .ban…

    2025年12月24日
    100
  • 如何用CSS Paint API为网页元素添加时尚的斑马线边框?

    为元素添加时尚的斑马线边框 在网页设计中,有时我们需要添加时尚的边框来提升元素的视觉效果。其中,斑马线边框是一种既醒目又别致的设计元素。 实现斜向斑马线边框 要实现斜向斑马线间隔圆环,我们可以使用css paint api。该api提供了强大的功能,可以让我们在元素上绘制复杂的图形。 立即学习“前端…

    2025年12月24日
    000
  • 图片如何不撑高父容器?

    如何让图片不撑高父容器? 当父容器包含不同高度的子元素时,父容器的高度通常会被最高元素撑开。如果你希望父容器的高度由文本内容撑开,避免图片对其产生影响,可以通过以下 css 解决方法: 绝对定位元素: .child-image { position: absolute; top: 0; left: …

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信