说说延时队列实现的几种姿势

引言

在开发中,往往会遇到一些关于延时任务的需求。例如

生成订单30分钟未支付,则自动取消生成订单60秒后,给用户发短信

对上述的任务,我们给一个专业的名字来形容,那就是延时任务 。那么这里就会产生一个问题,这个延时任务 和定时任务 的区别究竟在哪里呢?一共有如下几点区别

定时任务有明确的触发时间,延时任务没有定时任务有执行周期,而延时任务在某事件触发后一段时间内执行,没有执行周期定时任务一般执行的是批处理操作是多个任务,而延时任务一般是单个任务

下面,我们以判断订单是否超时为例,进行方案分析

方案分析(1)数据库轮询思路

该方案通常是在小型项目中使用,即通过一个线程定时的去扫描数据库,通过订单时间来判断是否有超时的订单,然后进行update或delete等操作

实现

博主当年早期是用quartz来实现的(实习那会的事),简单介绍一下 maven项目引入一个依赖如下所示

代码语言:javascript代码运行次数:0运行复制

        org.quartz-scheduler    quartz    2.2.2

调用Demo类MyJob如下所示

代码语言:javascript代码运行次数:0运行复制

package com.rjzheng.delay1;import org.quartz.JobBuilder;import org.quartz.JobDetail;import org.quartz.Scheduler;import org.quartz.SchedulerException;import org.quartz.SchedulerFactory;import org.quartz.SimpleScheduleBuilder;import org.quartz.Trigger;import org.quartz.TriggerBuilder;import org.quartz.impl.StdSchedulerFactory;import org.quartz.Job;import org.quartz.JobExecutionContext;import org.quartz.JobExecutionException;public class MyJob implements Job {    public void execute(JobExecutionContext context)            throws JobExecutionException {        System.out.println("要去数据库扫描啦。。。");    }    public static void main(String[] args) throws Exception {        // 创建任务        JobDetail jobDetail = JobBuilder.newJob(MyJob.class)                .withIdentity("job1", "group1").build();        // 创建触发器 每3秒钟执行一次        Trigger trigger = TriggerBuilder                .newTrigger()                .withIdentity("trigger1", "group3")                .withSchedule(                        SimpleScheduleBuilder.simpleSchedule()                                .withIntervalInSeconds(3).repeatForever())                .build();        Scheduler scheduler = new StdSchedulerFactory().getScheduler();        // 将任务及其触发器放入调度器        scheduler.scheduleJob(jobDetail, trigger);        // 调度器开始调度任务        scheduler.start();    }}

运行代码,可发现每隔3秒,输出如下

代码语言:javascript代码运行次数:0运行复制

要去数据库扫描啦。。。

优缺点

优点:简单易行,支持集群操作

缺点:

(1)对服务器内存消耗大(2)存在延迟,比如你每隔3分钟扫描一次,那最坏的延迟时间就是3分钟(3)假设你的订单有几千万条,每隔几分钟这样扫描一次,数据库损耗极大(2)JDK的延迟队列思路

该方案是利用JDK自带的DelayQueue来实现,这是一个无界阻塞队列,该队列只有在延迟期满的时候才能从中获取元素,放入DelayQueue中的对象,是必须实现Delayed接口的。

DelayedQueue实现工作流程如下图所示

说说延时队列实现的几种姿势

其中

poll():获取并移除队列的超时元素,没有则返回空take():获取并移除队列的超时元素,如果没有则wait当前线程,直到有元素满足超时条件,返回结果。实现

定义一个类OrderDelay实现Delayed,代码如下

代码语言:javascript代码运行次数:0运行复制

package com.rjzheng.delay2;import java.util.concurrent.Delayed;import java.util.concurrent.TimeUnit;public class OrderDelay implements Delayed { private String orderId; private long timeout; OrderDelay(String orderId, long timeout) {  this.orderId = orderId;  this.timeout = timeout + System.nanoTime(); } public int compareTo(Delayed other) {  if (other == this)   return 0;  OrderDelay t = (OrderDelay) other;  long d = (getDelay(TimeUnit.NANOSECONDS) - t    .getDelay(TimeUnit.NANOSECONDS));  return (d == 0) ? 0 : ((d < 0) ? -1 : 1); } // 返回距离你自定义的超时时间还有多少 public long getDelay(TimeUnit unit) {  return unit.convert(timeout - System.nanoTime(), TimeUnit.NANOSECONDS); } void print() {  System.out.println(orderId+"编号的订单要删除啦。。。。"); }}

运行的测试Demo为,我们设定延迟时间为3秒

代码语言:javascript代码运行次数:0运行复制

package com.rjzheng.delay2;import java.util.ArrayList;import java.util.List;import java.util.concurrent.DelayQueue;import java.util.concurrent.TimeUnit;public class DelayQueueDemo {  public static void main(String[] args) {         // TODO Auto-generated method stub         List list = new ArrayList();         list.add("00000001");         list.add("00000002");         list.add("00000003");         list.add("00000004");         list.add("00000005");         DelayQueue queue = new DelayQueue();         long start = System.currentTimeMillis();         for(int i = 0;i<5;i++){          //延迟三秒取出             queue.put(new OrderDelay(list.get(i),                     TimeUnit.NANOSECONDS.convert(3, TimeUnit.SECONDS)));                 try {                      queue.take().print();                      System.out.println("After " +                              (System.currentTimeMillis()-start) + " MilliSeconds");             } catch (InterruptedException e) {                 // TODO Auto-generated catch block                 e.printStackTrace();             }         }     }}

输出如下

代码语言:javascript代码运行次数:0运行复制

00000001编号的订单要删除啦。。。。After 3003 MilliSeconds00000002编号的订单要删除啦。。。。After 6006 MilliSeconds00000003编号的订单要删除啦。。。。After 9006 MilliSeconds00000004编号的订单要删除啦。。。。After 12008 MilliSeconds00000005编号的订单要删除啦。。。。After 15009 MilliSeconds

可以看到都是延迟3秒,订单被删除

优缺点

优点:效率高,任务触发时间延迟低。缺点:(1)服务器重启后,数据全部消失,怕宕机 (2)集群扩展相当麻烦 (3)因为内存条件限制的原因,比如下单未付款的订单数太多,那么很容易就出现OOM异常 (4)代码复杂度较高

(3)时间轮算法思路

先上一张时间轮的图(这图到处都是啦)

说说延时队列实现的几种姿势

时间轮算法可以类比于时钟,如上图箭头(指针)按某一个方向按固定频率轮动,每一次跳动称为一个 tick。这样可以看出定时轮由个3个重要的属性参数,ticksPerWheel(一轮的tick数),tickDuration(一个tick的持续时间)以及 timeUnit(时间单位),例如当ticksPerWheel=60,tickDuration=1,timeUnit=秒,这就和现实中的始终的秒针走动完全类似了。

如果当前指针指在1上面,我有一个任务需要4秒以后执行,那么这个执行的线程回调或者消息将会被放在5上。那如果需要在20秒之后执行怎么办,由于这个环形结构槽数只到8,如果要20秒,指针需要多转2圈。位置是在2圈之后的5上面(20 % 8 + 1)

实现

我们用Netty的HashedWheelTimer来实现 给Pom加上下面的依赖

代码语言:javascript代码运行次数:0运行复制

     io.netty   netty-all   4.1.24.Final  

测试代码HashedWheelTimerTest如下所示

代码语言:javascript代码运行次数:0运行复制

package com.rjzheng.delay3;import io.netty.util.HashedWheelTimer;import io.netty.util.Timeout;import io.netty.util.Timer;import io.netty.util.TimerTask;import java.util.concurrent.TimeUnit;public class HashedWheelTimerTest { static class MyTimerTask implements TimerTask{  boolean flag;  public MyTimerTask(boolean flag){   this.flag = flag;  }  public void run(Timeout timeout) throws Exception {   // TODO Auto-generated method stub    System.out.println("要去数据库删除订单了。。。。");             this.flag =false;  } } public static void main(String[] argv) {  MyTimerTask timerTask = new MyTimerTask(true);        Timer timer = new HashedWheelTimer();        timer.newTimeout(timerTask, 5, TimeUnit.SECONDS);     int i = 1;        while(timerTask.flag){         try {    Thread.sleep(1000);   } catch (InterruptedException e) {    // TODO Auto-generated catch block    e.printStackTrace();   }         System.out.println(i+"秒过去了");         i++;        }    }}

输出如下

代码语言:javascript代码运行次数:0运行复制

1秒过去了2秒过去了3秒过去了4秒过去了5秒过去了要去数据库删除订单了。。。。6秒过去了

优缺点

优点:效率高,任务触发时间延迟时间比delayQueue低,代码复杂度比delayQueue低。

缺点:

(1)服务器重启后,数据全部消失,怕宕机(2)集群扩展相当麻烦(3)因为内存条件限制的原因,比如下单未付款的订单数太多,那么很容易就出现OOM异常(4)redis缓存思路一

利用redis的zset,zset是一个有序集合,每一个元素(member)都关联了一个score,通过score排序来取集合中的值

ViiTor实时翻译 ViiTor实时翻译

AI实时多语言翻译专家!强大的语音识别、AR翻译功能。

ViiTor实时翻译 116 查看详情 ViiTor实时翻译

zset常用命令

添加元素:ZADD key score member [[score member] [score member] …]按顺序查询元素:ZRANGE key start stop [WITHSCORES]查询元素score:ZSCORE key member移除元素:ZREM key member [member …]

测试如下

代码语言:javascript代码运行次数:0运行复制

> 推荐下自己做的 Spring Cloud 的实战项目:>> # 添加单个元素redis> ZADD page_rank 10 google.com(integer) 1# 添加多个元素redis> ZADD page_rank 9 baidu.com 8 bing.com(integer) 2redis> ZRANGE page_rank 0 -1 WITHSCORES1) "bing.com"2) "8"3) "baidu.com"4) "9"5) "google.com"6) "10"# 查询元素的score值redis> ZSCORE page_rank bing.com"8"# 移除单个元素redis> ZREM page_rank google.com(integer) 1redis> ZRANGE page_rank 0 -1 WITHSCORES1) "bing.com"2) "8"3) "baidu.com"4) "9"

那么如何实现呢?我们将订单超时时间戳与订单号分别设置为score和member,系统扫描第一个元素判断是否超时,具体如下图所示

说说延时队列实现的几种姿势

实现一代码语言:javascript代码运行次数:0运行复制

package com.rjzheng.delay4;import java.util.Calendar;import java.util.Set;import redis.clients.jedis.Jedis;import redis.clients.jedis.JedisPool;import redis.clients.jedis.Tuple;public class AppTest { private static final String ADDR = "127.0.0.1"; private static final int PORT = 6379; private static JedisPool jedisPool = new JedisPool(ADDR, PORT); public static Jedis getJedis() {       return jedisPool.getResource();    } //生产者,生成5个订单放进去 public void productionDelayMessage(){  for(int i=0;i<5;i++){   //延迟3秒   Calendar cal1 = Calendar.getInstance();         cal1.add(Calendar.SECOND, 3);         int second3later = (int) (cal1.getTimeInMillis() / 1000);         AppTest.getJedis().zadd("OrderId", second3later,"OID0000001"+i);   System.out.println(System.currentTimeMillis()+"ms:redis生成了一个订单任务:订单ID为"+"OID0000001"+i);  } } //消费者,取订单 public void consumerDelayMessage(){  Jedis jedis = AppTest.getJedis();  while(true){   Set items = jedis.zrangeWithScores("OrderId", 0, 1);   if(items == null || items.isEmpty()){    System.out.println("当前没有等待的任务");    try {     Thread.sleep(500);    } catch (InterruptedException e) {     // TODO Auto-generated catch block     e.printStackTrace();    }    continue;   }   int  score = (int) ((Tuple)items.toArray()[0]).getScore();   Calendar cal = Calendar.getInstance();   int nowSecond = (int) (cal.getTimeInMillis() / 1000);   if(nowSecond >= score){    String orderId = ((Tuple)items.toArray()[0]).getElement();    jedis.zrem("OrderId", orderId);    System.out.println(System.currentTimeMillis() +"ms:redis消费了一个任务:消费的订单OrderId为"+orderId);   }  } } public static void main(String[] args) {  AppTest appTest =new AppTest();  appTest.productionDelayMessage();  appTest.consumerDelayMessage(); }}

此时对应输出如下

代码语言:javascript代码运行次数:0运行复制

1525086085261ms:redis生成了一个订单任务:订单ID为OID000000101525086085263ms:redis生成了一个订单任务:订单ID为OID000000111525086085266ms:redis生成了一个订单任务:订单ID为OID000000121525086085268ms:redis生成了一个订单任务:订单ID为OID000000131525086085270ms:redis生成了一个订单任务:订单ID为OID000000141525086088000ms:redis消费了一个任务:消费的订单OrderId为OID000000101525086088001ms:redis消费了一个任务:消费的订单OrderId为OID000000111525086088002ms:redis消费了一个任务:消费的订单OrderId为OID000000121525086088003ms:redis消费了一个任务:消费的订单OrderId为OID000000131525086088004ms:redis消费了一个任务:消费的订单OrderId为OID00000014当前没有等待的任务当前没有等待的任务当前没有等待的任务

可以看到,几乎都是3秒之后,消费订单。

然而,这一版存在一个致命的硬伤,在高并发条件下,多消费者会取到同一个订单号,我们上测试代码ThreadTest

代码语言:javascript代码运行次数:0运行复制

package com.rjzheng.delay4;import java.util.concurrent.CountDownLatch;public class ThreadTest { private static final int threadNum = 10; private static CountDownLatch cdl = new CountDownLatch(threadNum); static class DelayMessage implements Runnable{  public void run() {   try {    cdl.await();   } catch (InterruptedException e) {    // TODO Auto-generated catch block    e.printStackTrace();   }   AppTest appTest =new AppTest();   appTest.consumerDelayMessage();  } } public static void main(String[] args) {  AppTest appTest =new AppTest();  appTest.productionDelayMessage();  for(int i=0;i<threadNum;i++){   new Thread(new DelayMessage()).start();   cdl.countDown();  } }}

输出如下所示

代码语言:javascript代码运行次数:0运行复制

1525087157727ms:redis生成了一个订单任务:订单ID为OID000000101525087157734ms:redis生成了一个订单任务:订单ID为OID000000111525087157738ms:redis生成了一个订单任务:订单ID为OID000000121525087157747ms:redis生成了一个订单任务:订单ID为OID000000131525087157753ms:redis生成了一个订单任务:订单ID为OID000000141525087160009ms:redis消费了一个任务:消费的订单OrderId为OID000000101525087160011ms:redis消费了一个任务:消费的订单OrderId为OID000000101525087160012ms:redis消费了一个任务:消费的订单OrderId为OID000000101525087160022ms:redis消费了一个任务:消费的订单OrderId为OID000000111525087160023ms:redis消费了一个任务:消费的订单OrderId为OID000000111525087160029ms:redis消费了一个任务:消费的订单OrderId为OID000000111525087160038ms:redis消费了一个任务:消费的订单OrderId为OID000000121525087160045ms:redis消费了一个任务:消费的订单OrderId为OID000000121525087160048ms:redis消费了一个任务:消费的订单OrderId为OID000000121525087160053ms:redis消费了一个任务:消费的订单OrderId为OID000000131525087160064ms:redis消费了一个任务:消费的订单OrderId为OID000000131525087160065ms:redis消费了一个任务:消费的订单OrderId为OID000000141525087160069ms:redis消费了一个任务:消费的订单OrderId为OID00000014当前没有等待的任务当前没有等待的任务当前没有等待的任务当前没有等待的任务

显然,出现了多个线程消费同一个资源的情况。

解决方案(1)用分布式锁,但是用分布式锁,性能下降了,该方案不细说。(2)对ZREM的返回值进行判断,只有大于0的时候,才消费数据,于是将consumerDelayMessage()方法里的代码语言:javascript代码运行次数:0运行复制

if(nowSecond >= score){ String orderId = ((Tuple)items.toArray()[0]).getElement(); jedis.zrem("OrderId", orderId); System.out.println(System.currentTimeMillis()+"ms:redis消费了一个任务:消费的订单OrderId为"+orderId);}

修改为

代码语言:javascript代码运行次数:0运行复制

if(nowSecond >= score){ String orderId = ((Tuple)items.toArray()[0]).getElement(); Long num = jedis.zrem("OrderId", orderId); if( num != null && num>0){  System.out.println(System.currentTimeMillis()+"ms:redis消费了一个任务:消费的订单OrderId为"+orderId); }}

在这种修改后,重新运行ThreadTest类,发现输出正常了

思路二

该方案使用redis的Keyspace Notifications,中文翻译就是键空间机制,就是利用该机制可以在key失效之后,提供一个回调,实际上是redis会给客户端发送一个消息。是需要redis版本2.8以上。

实现二

在redis.conf中,加入一条配置

代码语言:javascript代码运行次数:0运行复制

notify-keyspace-events Ex

运行代码如下

代码语言:javascript代码运行次数:0运行复制

package com.rjzheng.delay5;import redis.clients.jedis.Jedis;import redis.clients.jedis.JedisPool;import redis.clients.jedis.JedisPubSub;public class RedisTest { private static final String ADDR = "127.0.0.1"; private static final int PORT = 6379; private static JedisPool jedis = new JedisPool(ADDR, PORT); private static RedisSub sub = new RedisSub(); public static void init() {  new Thread(new Runnable() {   public void run() {    jedis.getResource().subscribe(sub, "__keyevent@0__:expired");   }  }).start(); } public static void main(String[] args) throws InterruptedException {  init();  for(int i =0;i<10;i++){   String orderId = "OID000000"+i;   jedis.getResource().setex(orderId, 3, orderId);   System.out.println(System.currentTimeMillis()+"ms:"+orderId+"订单生成");  } } static class RedisSub extends JedisPubSub {  @Override  public void onMessage(String channel, String message) {   System.out.println(System.currentTimeMillis()+"ms:"+message+"订单取消");  } }}

输出如下

代码语言:javascript代码运行次数:0运行复制

1525096202813ms:OID0000000订单生成1525096202818ms:OID0000001订单生成1525096202824ms:OID0000002订单生成1525096202826ms:OID0000003订单生成1525096202830ms:OID0000004订单生成1525096202834ms:OID0000005订单生成1525096202839ms:OID0000006订单生成1525096205819ms:OID0000000订单取消1525096205920ms:OID0000005订单取消1525096205920ms:OID0000004订单取消1525096205920ms:OID0000001订单取消1525096205920ms:OID0000003订单取消1525096205920ms:OID0000006订单取消1525096205920ms:OID0000002订单取消

可以明显看到3秒过后,订单取消了

ps:redis的pub/sub 机制存在一个硬伤,官网内容如下

原 :Because Redis Pub/Sub is fire and forget currently there is no way to use this feature if your application demands reliable notification of events, that is, if your Pub/Sub client disconnects, and reconnects later, all the events delivered during the time the client was disconnected are lost.

翻 : Redis的发布/订阅目前是即发即弃(fire and forget)模式的,因此无法实现事件的可靠通知。也就是说,如果发布/订阅的客户端断链之后又重连,则在客户端断链期间的所有事件都丢失了。因此,方案二不是太推荐。当然,如果你对可靠性要求不高,可以使用。

优缺点

优点:

(1)由于使用Redis作为消息通道,消息都存储在Redis中。如果发送程序或者任务处理程序挂了,重启之后,还有重新处理数据的可能性。(2)做集群扩展相当方便(3)时间准确度高

缺点:(1)需要额外进行redis维护

(5)使用消息队列

我们可以采用rabbitMQ的延时队列。RabbitMQ具有以下两个特性,可以实现延迟队列

RabbitMQ可以针对Queue和Message设置 x-message-tt,来控制消息的生存时间,如果超时,则消息变为dead letterlRabbitMQ的Queue可以配置x-dead-letter-exchange 和x-dead-letter-routing-key(可选)两个参数,用来控制队列内出现了deadletter,则按照这两个参数重新路由。结合以上两个特性,就可以模拟出延迟消息的功能,具体的,我改天再写一篇文章,这里再讲下去,篇幅太长。优缺点

优点: 高效,可以利用rabbitmq的分布式特性轻易的进行横向扩展,消息支持持久化增加了可靠性。缺点:本身的易用度要依赖于rabbitMq的运维.因为要引用rabbitMq,所以复杂度和成本变高

总结

本文总结了目前互联网中,绝大部分的延时任务的实现方案。希望大家在工作中能够有所收获。

其实大家在工作中,百分九十的人还是以业务逻辑为主,很少有机会能够进行方案设计。所以博主不推荐在分布式这块,花太多时间。不过,鉴于现在的面试造火箭,工作拧螺丝现象太过严重,所以,最后来个小漫画娱乐一下。

说说延时队列实现的几种姿势

以上就是说说延时队列实现的几种姿势的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月8日 11:42:45
下一篇 2025年11月8日 11:44:20

相关推荐

  • 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
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯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
  • 如何用前端实现 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
  • 如何用CSS Paint API为网页元素添加时尚的斑马线边框?

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

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

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

    2025年12月24日
    000
  • 为什么自定义样式表在 Safari 中访问百度页面时无法生效?

    自定义样式表在 safari 中失效的原因 用户尝试在 safari 偏好设置中添加自定义样式表,代码如下: body { background-image: url(“/users/luxury/desktop/wallhaven-o5762l.png”) !important;} 测试后发现,在…

    2025年12月24日
    000
  • CSS 帮助

    我正在尝试将文本附加到棕色框的左侧。我不能。我不知道代码有什么问题。请帮助我。 css .hero { position: relative; bottom: 80px; display: flex; justify-content: left; align-items: start; color:…

    2025年12月24日 好文分享
    200
  • 前端代码辅助工具:如何选择最可靠的AI工具?

    前端代码辅助工具:可靠性探讨 对于前端工程师来说,在HTML、CSS和JavaScript开发中借助AI工具是司空见惯的事情。然而,并非所有工具都能提供同等的可靠性。 个性化需求 关于哪个AI工具最可靠,这个问题没有一刀切的答案。每个人的使用习惯和项目需求各不相同。以下是一些影响选择的重要因素: 立…

    2025年12月24日
    300
  • 如何用 CSS Paint API 实现倾斜的斑马线间隔圆环?

    实现斑马线边框样式:探究 css paint api 本文将探究如何使用 css paint api 实现倾斜的斑马线间隔圆环。 问题: 给定一个有多个圆圈组成的斑马线图案,如何使用 css 实现倾斜的斑马线间隔圆环? 答案: 立即学习“前端免费学习笔记(深入)”; 使用 css paint api…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信