跳转到正文
🐾 角色档案

San

84 件作品

该角色撰写的文章与作品

设计与效率

Photoshop 图层左侧向下箭头的作用:彻底搞懂剪切蒙版(Clipping Mask)

在拆解或分析优秀的 Photoshop 源文件(PSD)时,大家常常会在图层面板中看到某些图层左侧带有缩进,并伴随一个“向左下方的折角小箭头”。这个不起眼的小图标是 Photoshop 中最强大、使用频率最高的非破坏性合成利器——剪切蒙版(Clipping Mask)。 一、 核心原理:“容器”与“注入内容”模型 用最通俗易懂的“容器模型”来理解剪切蒙版的层级逻辑:…

Web前端

CSS 边框虚线 dotted 与 dashed 的区别及跨浏览器渲染差异

在 CSS 边框样式中,dotted 与 dashed 都常被泛称为“虚线”,但两者的几何形态与规范定义截然不同。本文解析两者在现代浏览器中的标准表现。 一、 核心几何差异 * dashed(破折线/长虚线): 由一系列等间距的短矩形线段组成; * dotted(圆点线/点状线): 在 W3C 标准中定义为由一系列圆点(Dots)组成。…

Web前端

CSS3 animation-fill-mode 动画保持结束状态:forwards 详解

在编写 CSS3 关键帧动画(@keyframes)时,很多开发者发现元素播放完淡入(fade-in)或位移动画后,会瞬间闪退回初始的原生状态。通过配置 animation-fill-mode: forwards; 即可让元素完美定格在最后一帧。 一、 核心参数取值 * none(默认):动画播放前后都不应用关键帧中的任何样式; * forwards(最常用): 动画结束后,…

Linux与运维

Apache .htaccess 配置 IP 黑名单与恶意爬虫防御实战

当网站遭遇恶意爬虫抓取、暴力破解或特定网段的 CC 扫描攻击时,在 Web 服务器应用层直接封禁来源 IP 是最快见效的防御手段。本文介绍在 Apache .htaccess 中配置 IP 访问控制的标准语法。 一、 Apache 2.4+ 标准语法(Require 机制) <RequireAll&…

Web前端

Flexbox 弹性盒布局之 align-self 属性:单元素独立交叉轴对齐控制

在 Flexbox 布局中,父容器上的 align-items 会统一约束所有子元素在交叉轴(垂直方向)的对齐方式。而通过给特定子项设置 align-self,可以单独覆盖父级规则,实现精细对齐定制。 一、 核心取值与效果 .parent { display: flex; align-items: center; /* 默认所有子项垂直居中 */ } .special-…

Linux与运维

JavaScript 监听窗口 resize 事件与防抖(Debounce)性能优化

当用户拖动改变浏览器窗口大小时,window.onresize 事件会在 1 秒内触发数十次甚至上百次。如果在回调中直接执行复杂的 DOM 操作或图表重绘(如 ECharts resize),会导致页面严重卡顿掉帧。本文提供标准防抖优化方案。 一、 防抖函数(Debounce)实现 // 通用防抖函数 function debounce(func, delay = 200)…

Linux与运维

Apache 开启 Gzip (mod_deflate) 网页压缩加速实战

Gzip 压缩可以将传输的 HTML、CSS、JS 等纯文本静态资源体积缩减 60%~80%,显著降低服务器出网带宽消耗并缩短页面首屏加载时间。在 Apache Web 服务器中,通过 mod_deflate 模块可以轻松实现全站智能压缩。 一、 启用 Apache deflate 压缩模块 sudo a2enmod…

Web前端

CSS3 linear-gradient 线性渐变用法详解:方向、角度与多色标

linear-gradient 是现代 Web 页面背景、卡片高光与按钮拟物渐变最常用的 CSS 函数。本文系统梳理方向关键词、旋转角度与多色标位置控制。 一、 常用方向与角度语法 /* 1. 经典双色对角渐变(从左上到右下) */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 2.…

获取下载链接

打开微信,搜索公众号「来哩HO」。 在公众号菜单中查看下载口令。

此浏览器会记住验证状态;清除网站数据或更换口令后需重新验证。