<link rel="stylesheet" href="https://cdn.example.com/style.css">在多数在线运行器中失效，因沙盒iframe或安全策略拦截跨域请求，导致CORS错误或资源被屏蔽；JSFiddle、CodePen等要求通过专属入口（如“External Resources”）添加，HTML内联<link>被忽略。
不支持直接引入外部样式表（如 link 标签指向 CDN 或远程 URL），但有可靠替代方案。
为什么 <link rel="stylesheet" href="https://cdn.example.com/style.css"> 在多数 HTML 在线运行器里失效
多数在线运行环境（如 JSFiddle、CodePen、JSBin、Playcode）默认禁用跨域 link 请求，或在沙盒 iframe 中执行 HTML，导致外部 CSS 被浏览器拦截（报 CORS 错误或 Blocked loading resource）。即使资源本身可公开访问，运行器的预处理器或安全策略也可能跳过解析该标签。
- JSFiddle：仅在“External Resources”面板手动添加才生效，
<link>写在 HTML 区域会被忽略 - CodePen：必须填入“CSS Settings → Add External Stylesheets/Pens”，HTML 中的
<link>不起作用 - 本地
file://打开的 HTML 文件也会因 CORS 被拒，和在线运行器表现一致
真正能用的三种方式（按推荐顺序）
绕过限制的关键是让样式内容进入运行器可执行的上下文，而非依赖浏览器原生加载。
-
内联
<style>块：把 CSS 内容直接粘贴进 HTML 的<style>标签，100% 可控，无跨域问题 - 使用运行器专属入口：如 CodePen 的 “CSS Settings”、JSFiddle 的 “External Resources” 输入框——它们会提前注入并处理跨域头，等价于服务端代理
-
用 JavaScript 动态插入
<link>：仅在支持fetch且允许跨域的环境（如某些新版 Playcode）可行，但需手动处理加载完成逻辑，容易漏掉onload监听
import 和 @import 也受限吗
是的，但程度不同：
立即学习“前端免费学习笔记（深入）”；
-
@import写在<style>里（如@import url("https://...");）：和<link>一样受 CORS 和运行器策略限制，多数不生效 -
import（ESM 方式）：HTML 运行器基本不支持模块化 CSS 导入；若强行写<script type="module">import './style.css';</script>，会报Not supported或 404 —— 因为没有配套的 CSS 加载器
最稳妥的做法永远是：把要用的 CSS 复制进 <style> 标签，或者善用运行器提供的“External CSS”输入框。别指望浏览器原生加载机制在沙盒环境里自动工作——它本来就不该工作。
