Andy.scss 视觉效果速成透明度、阴影、圆角与边框处理的 8 个技巧【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andyAndy.scss 是一个开源的 Sass 混合宏mixins集合库它把透明度、阴影、圆角、边框处理等高频视觉需求封装成即插即用的工具让新手不用反复搜索写法也能轻松产出兼容旧浏览器的专业样式。本文围绕透明度、阴影、圆角与边框四大视觉方向分享 8 个拿来即用的实战技巧帮你快速上手 Andy.scss。快速上手如何引入 Andy.scss 混合宏在使用这些技巧之前先花 30 秒完成引入克隆仓库获取源码git clone https://gitcode.com/gh_mirrors/an/andy在你的 SCSS 项目中引入整个文件import andy;按需调整全局变量例如基准字号$base-font-size位于andy.scss第 14 行Andy.scss 内部有一个自动输出浏览器前缀的辅助混合宏prefix()andy.scss第 23–29 行下面所有技巧中看到的-webkit-、-moz-、-ms-前缀都是它替你生成的这也是它比手写 CSS 更省心的原因之一。先看一张总览表快速定位你要找的能力视觉方向核心混合宏/函数对应技巧透明度opacity()/fade()技巧 1、2、3半透明色值black()/white()技巧 2阴影outline()/text-shadow()技巧 4、5圆角border-radius-separate()技巧 6边框与盒模型box-sizing()技巧 7组合动效transition()transform()技巧 8技巧 1SCSS 透明度写法——用 opacity() 一行兼容老浏览器新手写透明度往往只写opacity: 0.5在 IE8/9 下就会失效。Andy.scss 的opacity()混合宏andy.scss第 444–447 行会自动补全-ms-filter兼容代码.mask { include opacity(0.5); }编译结果.mask { opacity: 0.5; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity50); }一条指令同时覆盖现代浏览器与老版本 IE这就是 Andy.scss 透明度写法最省心的地方。技巧 2半透明背景与边框——black() 和 white() 函数用法很多视觉场景需要半透明的黑或半透明的白比如遮罩层、卡片描边。Andy.scss 提供了两个函数black($opacity)与white($opacity)andy.scss第 461–463 行、第 477–479 行直接返回带透明度的rgba色值.modal-mask { background: black(0.6); // rgba(0, 0, 0, 0.6) } .card { border-color: white(0.2); // rgba(255, 255, 255, 0.2) }相比手动计算rgba这种函数用法更直观配合技巧 4 的阴影还能组合出层次丰富的深色、浅色主题。技巧 3透明度渐变动画——fade() 自动生成关键帧想让元素在两种透明度之间平滑过渡fade()混合宏andy.scss第 645–656 行只需传入起始、结束透明度与动画参数就会自动生成带前缀的keyframes并挂上animation.loading { include fade(0, 1, 1.2s ease-in-out); }它会生成类似fade-0-1的关键帧动画从完全透明渐隐到完全可见非常适合做加载提示、弹层淡入等效果省去手写动画关键帧的重复劳动。技巧 4box-shadow 内嵌描边——outline() 做出立体按钮不需要额外图片用阴影也能画出立体感。outline()混合宏andy.scss第 282–284 行在元素顶部生成一条半透明白边、内部叠加一条内阴影黑边形成经典的内嵌描边效果.btn { include outline; }编译结果.btn { box-shadow: rgba(255, 255, 255, 0.5) 0 1px 0, inset rgba(0, 0, 0, 0.75) 0 1px 0; }用来做凹陷按钮、输入框、卡片内边框都非常合适是性价比极高的 box-shadow 技巧。技巧 5文字浮雕阴影——text-shadow() 让标题更有质感想让文字有凸起或浮雕质感text-shadow()混合宏andy.scss第 538–540 行接收一个透明度参数自动生成白色上投影.title { include text-shadow(0.6); }深色背景上的浅色文字配合这条白色阴影立刻呈现出立体浮雕感常用于大标题、LOGO 或强调性文案一行代码即可完成。技巧 6圆角处理神器——border-radius-separate() 分别控制四个角CSS 的border-radius四个值顺序容易记混而 Andy.scss 的border-radius-separate()andy.scss第 142–147 行按左上、右上、右下、左下显式传参同时自动补全-webkit-与-moz-前缀.speech-bubble { include border-radius-separate(4px, 4px, 0, 0); }这样写出来的圆角处理代码参数含义一目了然特别适合对话框、徽标等只有两个角是圆的特殊形状。技巧 7边框布局不踩坑——box-sizing() 统一盒模型给元素加边框后宽度被撑破是新手最常见的布局噩梦。box-sizing()混合宏andy.scss第 162–164 行帮你统一盒模型让边框与内边距都算进元素宽度内*, *::before, *::after { include box-sizing(border-box); }它自动补全-moz-box-sizing前缀一条规则全局生效从此加边框、调内边距都不会破坏布局是边框处理的第一个基本功。技巧 8视觉组合拳——transition() 打造丝滑悬停效果把前面学的透明度、阴影、圆角组合起来再用transition()混合宏andy.scss第 573–575 行与transform()andy.scss第 556–558 行加上过渡动画就能得到惊艳的卡片悬停效果.card { include transition(0.3s, ease-in-out); :hover { include transform(translateY(-4px)); box-shadow: 0 8px 24px black(0.15); } }鼠标悬停时卡片轻微上浮并投下柔和阴影transition()会自动补齐-webkit-transition前缀让动效在不同浏览器下表现一致。总结8 个技巧速查清单技巧 1opacity()—— 一行代码搞定透明度与 IE 兼容技巧 2black()/white()—— 快速生成半透明背景与边框色技巧 3fade()—— 自动生成透明度渐变动画关键帧技巧 4outline()—— 用 box-shadow 做出内嵌立体感技巧 5text-shadow()—— 给文字加浮雕质感技巧 6border-radius-separate()—— 四个圆角分别控制技巧 7box-sizing()—— 让边框不再撑破布局技巧 8transition()transform()—— 组合出丝滑悬停动效Andy.scss 的全部混合宏都集中在一个文件里源码注释完善官方 SassDoc 文档也一并收录在doc/index.html。如果你正在为透明度、阴影、圆角与边框处理反复查找写法不妨把这 8 个技巧收藏起来下次直接复制使用省下的时间足够你多写几个页面啦【免费下载链接】andyOpen-Source Collection of Useful SASS Mixins Library项目地址: https://gitcode.com/gh_mirrors/an/andy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考